一、為什麼要清除浮動
元素浮動後，該元素就會脫離文件流，浮動在文件之上。在css中，任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。當元素浮動之後，不會影響塊級元素的布局，只會影響內聯元素布局。此時文件流中的普通流就會表現得該浮動框不存在一樣的布局模式。沒有清除浮動會出現高度塌陷（包含框的高度小於浮動框）、包含塊下的非浮動元素和浮動元素會發生重疊。
先看下未設定浮動效果，**如下：
浮動元素
再看下設定浮動但沒有清除浮動時，出現高度塌陷的**如下：
浮動元素
再看下設定浮動但沒有清除浮動時，包含塊下的非浮動元素和浮動元素發生重疊的**如下：
浮動元素
非浮動元素
預期中，非浮動元素應該顯示在新的一行中，並且是矩形。實際顯示效果卻是乙個朝左的l。通過css2.1的規則可以解釋這個現象：
二、如何清除浮動
1、:after清除浮動（最常見）
利用:after偽元素來清除浮動，這種方式相容性好。且不需新增額外的標籤
浮動元素
非浮動元素
絕對定位元素：position (absolute、fixed)
display 為 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
3）bfc作用
常見樣式問題
div 水平垂直居中 絕對定位 transform 絕對定位方法 margin left的一半 絕對定位方法 絕對定位下top left right bottom 都設定0，margin設定auto flex 隱藏元素 dom 結構 瀏覽器不會渲染 display 屬性為 none 的元素，不佔據空...
移動端常見樣式問題
1 border 1px相容性問題 解決辦法 1px px大寫 2 ios上使用 webkit user select none導致input textarea輸入框無法輸入 3 antd mobile tabs在ios如果不禁用swipeable會出現向下滾動時觸發左滑動 4 ios載入順序打包後...
常見樣式相容性問題整理
1.在ie6下，div底部會多出一行，而且是原來的字。說明 這是注釋bug，經典的ie6 bug。注釋造成文字溢位是ie6的bug，注釋造成文字溢位與其位置有關，注釋造成文字溢位與文字區塊的固定寬度有關，溢位文字的字數 注釋的條數 2 1，這裡的字數在中文或英文數字時都成立。當溢位的文字字數大於文字...