- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство clear</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>
<div class="block block2">.block2</div>
<div class="block block3">.block3</div>
</div>
<div class="container">
<h1>Флоат вправо →</h1>
<div class="block block4">.block4</div>
<div class="block block5">.block5</div>
<div class="block block6">.block6</div>
</div>
</body>
</html>
CSS
h1 {
margin-top: 0;
font-size: 20px;
}
.container {
width: 400px;
min-height: 150px; /* прячем эффект выпадания флоатов */
margin: 20px auto;
padding: 10px;
box-shadow: 0 0 2px #cccccc;
}
.block {
width: 80px;
margin-bottom: 10px;
padding: 10px;
color: white;
background-color: #3498db;
border: 2px solid #34495e;
}
.block1,
.block2,
.block3 {
float: left;
margin-right: 10px;
}
.block4,
.block5,
.block6 {
float: right;
margin-left: 10px;
}
.block2 {
}
.block5 {
}
ЗадачиВыполнено
- Задайте
блоку 2запрет обтекания справа, - а затем слева.
- Задайте
блоку 5запрет обтекания слева, - а затем справа.
- Задайте
блокам 5 и 2запрет обтекания с обеих сторон.