なぜクリアフロート？
（フロートをクリアすることは、主に、子要素のフローティングによって引き起こされる親要素の内部高さが0であるという問題を解決することです）
1.以下のように、親ボックスにボーダーを設定し、中に大小2つのボックスを入れます。大小にフロートが設定されていない場合、デフォルトで親ボックスが開きます。
2.内側の2つのボックスにfloat属性を追加すると
上部の紺色のボックスが表示され、高さが設定されておらず、大小が浮いているため、親ボックスが線になります。
結論として：
-
親要素が高さを与えない場合、
-
内部要素が浮いていないとき、それらは広がります
-
フローティングの場合、親要素は線になります
現時点では、多くの人が新しいラベルを明確だと思うでしょう。両方とフロートの方法ですが、これら2つの方法はお勧めしません。
明確なこと：両方
クリア：両方：本質はフロートを閉じることです。つまり、親ボックスに出口と入口を閉じさせ、子ボックスが出ないようにします。
フロートをクリアする方法（最も一般的に使用される4つ）
1.追加のラベリング方法
（最後のフローティングラベルの後に、新しいラベルを追加し、クリアに設定します：両方;）（非推奨）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fahter{
width: 400px;
border: 1px solid deeppink;
}
.big{
width: 200px;
height: 200px;
background: darkorange;
float: left;
}
.small{
width: 120px;
height: 120px;
background: darkmagenta;
float: left;
}
.footer{
width: 900px;
height: 100px;
background: darkslateblue;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="fahter">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签法</div>
</div>
<div class="footer"></div>
</body>
</html>
現時点では
フロートをクリアすると、親要素は自動的に子ボックスの最高の高さを検出し、次に同じ高さを検出します。
利点：理解しやすく便利です
短所：意味のないタグの追加、不十分なセマンティクス
使用はお勧めしません。
2.オーバーフロー属性を親に追加します
（オーバーフローを追加：親要素に非表示）（非推奨）
BFCメソッドをトリガーすることにより、フローティングがクリアされます
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}
利点：シンプルなコード
短所：コンテンツが増えると、自動行折り返しなしでコンテンツが非表示になりやすく、オーバーフローした要素を表示できません。
推奨されません
3. after疑似要素を使用して、フロートをクリアします（推奨）
.clearfix:after{
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: " ";/* content中包含的空格也能生效，旧版本Opera浏览器中有个隐藏的bug，需要添加一个空格字符才能解决 */
display: block;
clear:both;
/*
下面两个属性取消后，也可以清除浮动。
我个人理解如下，为了保证after不在界面显示，所以使用了下方属性。
*/
height: 0;/* 高度为0，隐藏元素 */
visibility: hidden;/* 元素隐藏，原位置还在 */
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>
</body>
利点：クローズドフローティングのアイデアに沿って、構造は意味的に正しい
短所：ie6-7は疑似要素をサポートしていません：その後、zoom：1を使用してhasLayoutをトリガーします。
推奨用途
4.前後の二重疑似要素を使用してフロートをクリアします（推奨）
/* 提示：当我们不想要外边距折叠（重叠取最大值）时，这个版本的清除浮动非常有效 */
.clearfix:after,.clearfix:before{
content: " ";/* content中包含的空格也能生效，旧版本Opera浏览器中有个隐藏的bug，需要添加一个空格字符才能解决 */
/* 外边距无法通过单元格元素折叠 */
display: table;/* 防止伪元素外边距折叠 */
}
/* 只有after伪元素需要清除浮动 */
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
利点：コードがより簡潔になります
短所：zoom：1を使用してhasLayoutをトリガーします。
この記事は他のブロガーによって転載されています。違反がある場合は
、転載元を削除するために連絡してください：https：//blog.csdn.net/h_qingyi/article/details/81269667
説明：元のコンテンツの一部です。削除して追加しました（リファレンスブック：CSSの詳細な分析）。