--cssがフローティングをクリアする問題をすばやく解決します
なぜクリアフロート？
子ボックスがfloatに設定されていて、親ボックスに高さがない場合、フローティングの子要素は空中に浮き（標準フローから外れます）、子ボックスは親ボックスから分離され、の高さは親ボックスは0になります。
フロートをクリアする方法は？どちらの方法が最適ですか？
最初：
親ボックスに固定の高さを設定する：子ボックスはフロートするため、標準ストリームから逸脱し、親ボックスに固定されるように父親に固定の高さを設定しますが、コンテンツがまだたくさんある場合はどうなりますか未満？したがって、この方法は厳密で柔軟性がありません。
2番目のタイプ：
divタグに追加されたfloating要素に戻る最後の子divset clear：both style：このメソッドはfloatもクリアできますが、お勧めしません。
3番目のタイプ：
親要素にoverflow：hiddenを追加：このメソッドはfloatをクリアすることもできます、overflow：hidden; floatをクリアできるだけでなく、オーバーフローの非表示の問題を解決し、マージンの崩壊の問題を解決するだけでなく、このクリア方法もfloatsは良くありません。overflow：hiddenが親要素に追加されるため、親要素もオーバーフロー非表示に設定されますが、これは私たちが見たくないものです。この方法は適用できません。
第4：
フロートをクリアするには、after疑似要素を使用します。一重引用符の方が互換性が高いため、疑似要素には一重引用符を記述することをお勧めします（推奨）
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
大きなボックスに2つのサブボックスをネストして、フロートの削除を確認する4つの方法を次に示します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clearfix:after {
content: '';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
.box {
border: 1px solid #000;
/* 清除浮动第一种方法：父元素加固定高度(缺点：不够灵活) */
/* height: 200px; */
/* 2. 父元素加overflow:hidden 缺点父元素加了溢出隐藏*/
/* overflow: hidden; */
/* 3. 给最后一个浮动子元素后面加div标签 div设置clear:both样式 缺点：增加div标签代码多余*/
/* 4 伪元素清除浮动 */
}
.box1 {
float: left;
width: 200px;
height: 200px;
background: cyan;
}
.box2 {
float: left;
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="box1"></div>
<div class="box2"></div>
<div style="clear: both;"></div>
</div>
</body>
</html>