記錄一下清除浮動的三種方法：
html結構：
class="main">
12>
3>
body
.main
.main div
發現父元素並沒有高度，如果子元素不浮動，父元素是可以隨著子元素的高度而自動撐開的。當設定為浮動的時候，子元素已經脫離了文件流，因此父元素並沒有包含子元素，在沒有設定高度的情況自然就出現了如圖的情況，這種時候我們就需要清除浮動：
1、新增div標籤，設定clear:both
html：
class="main">
12>
3>
.main .clear.main3、使用after偽元素
.main:after.main:after無論哪種寫法都是採用了相同的原理，其本質就是使用了方法一，只不過方法一單獨寫了乙個標籤，對**不是很友好，而after 相當於在元素內部插入了元素塊，更加簡潔方便。
清除浮動後的效果圖：
可針對自己的**環境選擇合適的清除浮動的方法，推薦使用方法二和方法三
浮動換行的解決辦法
浮動換行阻擋 往往出現在瀑布流布局中，若上一行浮動塊高度不一致，就會導致在當前行浮動過程中被阻擋。margin也是浮動塊停止的邊緣。一般情況下，往往是因為盒子的內容高度不一致，問題最多的是。當每個的寬高比不一致時，設定相同高度。高度會有差異。解決辦法 移動端 給乙個固定高，設定object fit ...
清除浮動總結
父級元素沒有高度 內容需要從後台獲取時，不確定內容多少，此時父級元素不設定高度 子盒子浮動了。影響下面布局了，我們就應該清除浮動了 清除浮動的方式 優點缺點 額外標籤法 隔牆法 通俗易懂，書寫方便 新增許多無意義的標籤，結構化較差。父級新增overflow hidden 屬性 書寫簡單 溢位隱藏 父...
浮動產生的問題以及解決辦法
子元素脫離文件流不佔位，父元素的高度撐不起來，下面的元素會往上移動。1 給浮動元素的父元素設定高度 但是不靈活 2，給浮動元素的父元素設定overflow hidden scroll auto 常用 溢位隱藏，父元素要知道子元素是否溢位，浮動元素也參與計算 3,在浮動元素的後面加乙個空的塊元素 二者...