本文總結自，b站-pink老師（鳴謝）為什麼要清除浮動？由於父級盒子很多情況下，不方便給高度，但是子盒子浮動又不占有位置，最後父級盒子高度為零時就會影響下面的標準流盒子。
清除浮動語法
選擇器
屬性值描述left
不允許左側有浮動元素（清除左側浮動的影響）
right
不允許右側有浮動元素（清除右側浮動的影響）
both
同時清除左右兩側浮動的影響
父級新增overflow屬性
父級新增after偽元素
父級新增雙偽元素
注意：新增的必須是塊級元素才行！！！
">>
>
或
overflow屬性，將其屬性值設定為hidden、auto或者scroll:after方式是額外標籤法的公升級版。也是給父元素新增。
.clearfix:after
.clearfix:before,
.clearfix:after
.clearfix:after
清除浮動方式
優點缺點
額外標籤法（隔牆法）
通俗易懂，書寫方便
新增許多無意義標籤，結構化較差。
父級overflow:hidden;
書寫簡單
溢位部分會隱藏，不顯示
父級after偽元素
結構語義化正確
ie6-7相容性問題
父級雙偽元素
結構語義化正確
ie6-7相容性問題
**演示：
lang
="en"
>
>
charset
="utf-8"
/>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
/>
>
documenttitle
>
css幾種清除浮動的方法
在div css布局時，為了實現多種布局，會用到浮動。但是不清除浮動也會產生一些問題。1 設定浮動會被塊級兄弟元素覆蓋 我設定了浮動但是沒有背景色 我沒有設定浮動，但是有背景色 body div1 div blank div blue2 父元素高度塌陷 我是塊元素，設定了浮動 我是span，沒有設定...
清除浮動的幾種常用方法
首先，浮動這個樣式的出現，僅僅只是為了實現 環繞的效果，現在大多時利用浮動來布局 浮動 使元素推理文件流，按照指定方向發生移動 遇到父級邊界或者相鄰的浮動元素會停下來 浮動的特性 1，塊元素一行顯示多個 2，內聯元素支援寬高 3，沒有設定寬度時由內容撐開寬度 4，脫離文件流 浮動的破壞性 浮動元素脫...
CSS之清除浮動的幾種常用方法小結
在浮動元素末尾新增乙個空的標籤例如 其他標籤br等亦可。class warp id float class main left maindiv class side left sidediv div div 優點 通俗易懂，容易掌握 缺點 可以想象通過此方法，會新增多少無意義的空標籤，有違結構與表現...