Clearfix — вспомогательный класс в css, с помощью которого мы исправляем схлопывающиеся размеры контейнера у плавающих элементов.
В CSS добавляется следующее правило:
.clearfix::after {
content: "";
display: table;
clear: both;
}
А затем класс clearfix
добавляется к контейнеру, внутри которого лежат флоатные колонки.
Без clearfix
:
.container {
width: 400px;
margin: 20px auto;
padding: 10px;
box-shadow: 0 0 5px #999;
border: 2px solid #34495e;
}
.columns - container {
padding: 10px;
background: #ecf0f1;
border: 2px solid #34495e;
}
.column {
width: 150px;
min-height: 100px;
padding: 10px;
color: white;
background: #3498db;
border: 2px solid #34495e;
}
.column1 {
float: left;
}
.column2 {
float: right;
}
<div class="container">
<div class="columns-container">
<div class="column column1">
.column1<br> Первая колонка
</div>
<div class="column column2">
.column2 Вторая колонка
</div>
</div>
</div>
C clearfix
:
.container {
width: 400px;
margin: 20px auto;
padding: 10px;
box-shadow: 0 0 5px #999;
border: 2px solid #34495e;
}
.columns - container {
padding: 10px;
background: #ecf0f1;
border: 2px solid #34495e;
}
.column {
width: 150px;
min-height: 100px;
padding: 10px;
color: white;
background: #3498db;
border: 2px solid #34495e;
}
.column1 {
float: left;
}
.column2 {
float: right;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
<div class="container">
<div class="columns-container clearfix">
<div class="column column1">
.column1<br> Первая колонка
</div>
<div class="column column2">
.column2 Вторая колонка
</div>
</div>
</div>
display: inline-table; height: auto;