Рассмотрим на примере 2 метода: старый и новый.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clear fix</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="block clearfix2">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<!-- <div class="clearfix1"></div> --> <!-- Метод №1 для предотвращения схлопования блока. Портит семантику. -->
</div>
</body>
</html>
main.css
.block {
background: blue;
padding: 30px 0;
}
.element {
float: left;
width: 100px;
height: 100px;
border-radius: 3px;
background: yellow;
margin-left: 10px;
}
/* Этот метод добавляет в верстке лишний пустой узел. */
/* .clearfix1 {
clear: both;
} */
/* Метод от схлопывания с псевдоклассом. */
.clearfix2:after {
content: '';
display: table;
width: 100%;
clear: both;
}
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clear fix</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="block clearfix2">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<!-- <div class="clearfix1"></div> --> <!-- Метод №1 для предотвращения схлопования блока. Портит семантику. -->
</div>
</body>
</html>
main.css
.block {
background: blue;
padding: 30px 0;
}
.element {
float: left;
width: 100px;
height: 100px;
border-radius: 3px;
background: yellow;
margin-left: 10px;
}
/* Этот метод добавляет в верстке лишний пустой узел. */
/* .clearfix1 {
clear: both;
} */
/* Метод от схлопывания с псевдоклассом. */
.clearfix2:after {
content: '';
display: table;
width: 100%;
clear: both;
}
Комментариев нет:
Отправить комментарий