Когда свойство float применяется к элементу внутри не плавающего родительского элемента, родительский элемент не растягивается автоматически для размещения плавающих элементов. Такое поведение обычно называют сворачиванием родителя (collapsing parent). Это не всегда очевидно, если вы не применяете некоторые визуальные свойства, такие как фон или границы, к родительским элементам, но это важно знать и с ними нужно работать, чтобы предотвратить странный макет и проблемы с кросс-браузером.
Проблему лучше всего демонстрирует следующее изображение:
Псевдоэлемент CSS :after в сочетании со свойством content используется для решения проблем, связанных со свертыванием родительских элементов в браузерах, таких как Firefox, Chrome, Safari и т. д.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fixing Collapsing Parent Issue</title>
<style>
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.container{
background:yellow;
border: 1px solid #000000;
}
.column-left, .column-right{
width: 200px;
margin: 10px;
padding: 10px;
}
.column-left{
float: left;
background: #ff0000
}
.column-right{
float: right;
background: #00ff00;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="column-left">Floated to left.</div>
<div class="column-right">Floated to right.</div>
</div>
</body>
</html>Подробнее см. Руководство по выравниванию элементов в CSS.
