為什麼使用浮動？浮動是一種常見的布局方式，當兩個或者多個塊級元素(塊級元素的特點是在文件中獨佔一行)需要並列為一行的時候，我們就需要加浮動
擴充套件知識，使塊級元素並列在一行的方式有很多種，比如使用display:inline-block,但是display:inline-block轉換出來的元素，預設也會對它們之間的換行符進行轉換，也就是說，它所操作出來的元素，中間都會帶一點間隙，是空白字元在佔位(可以使用font-size:0)來處理，還有一種是彈性盒布局，加了彈性盒的元素，它的子元素都會預設沿著它的水平軸進行排列
為什麼清除浮動？因為會最重要的一點是會導致高度塌陷
我們都知道會造成元素脫離文件流的屬性有很多，比如浮動、定位中的某一些屬性等，元素脫離文件流後，不在占有原來的位置，導致布局發生塌陷
文件流就是頁面在渲染到瀏覽器自上而下、自左而右排列的乙個過程，而脫離文件流會讓這一渲染過程變得複雜，引起更多的計算，因此，我們開發過程中應該盡量少的使用定位或浮動
舉個例子，浮動以字面意思理解，我們可以理解為漂浮起來，當乙個元素內部的兩個子元素加了浮動，那他們就會漂浮，就如同乙個大樓，把第一層的幾根柱子抽走，第一層就會發生塌陷，從而整個大樓都會往下塌陷乙個這些柱子的高度，這也就是常常提到的高度塌陷
我們清除浮動的目的就是為了解決當子元素漂浮起來以後，我們的父元素依然可以保持正常的高度，不引起頁面的崩塌
清除浮動的幾種方式
最簡單的一種方式，就是給父元素加固定的高度，但是給父元素加固定高度也就意味著子元素只要高度發生變化，我們父元素就得同步改，不利於維護
給父元素內部加乙個第三者，比如div中有兩個p元素加了浮動，導致div塌陷了，我們可以給div中加乙個除了p之外的其他塊元素，比如加乙個section，然後給這個section加乙個clear:both，這樣就可以起到解決塌陷的效果，但是這樣不好的地方就是頁面中多了容易讓人產生疑惑的元素，增加了**負擔，不利於維護
子元素浮動，父元素塌陷，我們可以給父元素也加乙個浮動，讓他們都飄起來，這樣也可以解決高度塌陷，但是就會陷入死迴圈，因為父元素的父元素又會塌陷
給父元素加乙個overflow:hidden;這種很科幻，但是的確有用；
通過偽元素解決高度塌陷，偽元素這種方式是目前最常見的，也是最好的一種解決方案，它和上面我們提到的給父元素中加乙個第三者是乙個概念，只是偽元素是我們通過css來實現的，我們給需要解決高度塌陷的元素寫乙個公共的類，加乙個zoom:1；這個是為了解決ie的浮動問題，然後給這個類新增乙個偽元素，先把這個偽元素轉為塊級元素，然後讓它寬高為0，再加乙個clear:both(說白了，這句始終需要用到),這樣，乙個公共的類就完成了，我們清除浮動只需要加上這個類就可以了
css清除浮動的幾種方法
我一直以為產生浮動要我們給元素設定float，例如這裡提到的 今天我發現如果父盒子高度不定，子元素沒有設定浮動，如果父盒子高度變為0，那麼裡面的子元素會浮動，效果 黃色盒子上移了，很明顯child產生了浮動，效果等同於父盒子高度不定，子元素設定浮動，那麼父盒子高度會變成0，也就是高度坍塌。那麼如何解...
css清除浮動的幾種方法
當對某個標籤使用浮動的時候，該塊內容就會脫離文件流，其父元素便不再包裹該標籤內容，父元素的高度會變成0，出現高度塌陷的問題。這個時候就要清楚浮動。今天就來介紹一下css清除浮動的幾種方法。1.在文件最後麵新加乙個空的div,如下 style clear both div 但是如果使用這種方法，新增了...
css清除浮動的幾種方法
1，overflow hidden 在父元素上加上overflow hidden，當然這會有一些 比如內部的一些超出父元素的部分就會被截斷，滾動條也會不見。所以謹慎使用。2，clear both 在浮動的元素下方加乙個div 3，利用偽元素clearfix，這是比較常見和有效的方法，它的本質就是建構...