Свойство CSS clear
Свойство clear задаёт, что должно происходить с элементом рядом с плавающим элементом. Оно предотвращает обтекание или расположение элементов рядом с плавающим содержимым.
Оно может принимать следующие значения: none, left, right, both и inherit.
Пример
clear: left сдвигает второй div вниз, ниже плавающего первого div.
Prompt
HTML-страница, показывающая свойство clear.
В внутреннем блоке
<style> сделайте div1 плавающим слева (как цветной блок) и задайте div2 clear: left с рамкой, чтобы div2 сдвигался ниже плавающего div1, а не стоял рядом. Добавьте оба div.
Output: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.div1 {
float: left;
width: 100px;
height: 70px;
background-color: #4CAF50;
}
.div2 {
clear: left;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2 - Because clear: left is set, this div is pushed below the floated div1.</div>
</body>
</html>
Приём CSS Clearfix
Если плавающий элемент выше своего контейнера, он выходит за пределы контейнера. Приём clearfix решает эту проблему.
Приём clearfix использует псевдоэлемент ::after, чтобы родительский контейнер правильно охватывал свои плавающие дочерние элементы.
Пример
Класс clearfix заставляет контейнер охватывать свой высокий плавающий дочерний элемент.
Prompt
HTML-страница, использующая приём clearfix, чтобы контейнер охватывал свой высокий плавающий дочерний элемент.
В внутреннем блоке
<style> задайте контейнеру рамку, сделайте плавающим высокий блок внутри него, и добавьте правило .clearfix::after с content "", clear both и display table. Примените класс clearfix к контейнеру, чтобы он правильно охватывал плавающий дочерний элемент.
Output: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
border: 3px solid #4CAF50;
}
.box img {
float: right;
}
.imgbox {
float: right;
width: 100px;
height: 170px;
background-color: #4CAF50;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h3>With clearfix</h3>
<div class="box clearfix">
<div class="imgbox"></div>
Some text. The clearfix hack makes the green border enclose the tall floated box.
</div>
</body>
</html>
Свойства CSS
Краткий обзор свойств здесь:
clear— задаёт, что происходит с элементом рядом с плавающим элементом.float— задаёт, обтекается ли элемент и как.