- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<title>float и выпадание из потока</title>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Прохождение сквозь блоки</h1>
<div class="block block1">
.block1
</div>
<p>Следующие за float'ным <em>блочные</em> боксы подтягиваются вверх и занимают его место, как если бы float'нутого бокса в потоке не было.</p>
<p><em>Строчные</em> же боксы внутри подвинувшихся наверх блоков начинают обтекать float'нутый бокс со свободной стороны.</p>
<h1>Выпадание из родителя</h1>
<div class="columns-container">
<div class="block block2">
.block2<br>
Первая колонка
</div>
<div class="block block3">
.block3
Вторая колонка
</div>
</div>
</div>
</body>
</html>
CSS
h1 {
margin-top: 0;
font-size: 20px;
}
p {
background-color: #ecf0f1;
border: 2px dotted #bdc3c7;
}
.container {
width: 400px;
margin: 20px auto;
padding: 10px;
box-shadow: 0 0 2px #cccccc;
}
.columns-container {
padding: 10px;
background-color: #27ae60;
border: 2px solid #34495e;
}
.block {
width: 100px;
margin-bottom: 10px;
padding: 10px;
color: white;
background-color: #3498db;
border: 2px solid #34495e;
}
Вы перешли на другую страницу
ЗадачиВыполнено
0
.block1
задайте флоат влево, маргин справа10px
.- А затем
.block1
задайте высоту100px
. .block2
задайте флоат влево..block3
задайте флоат вправо.