在給html新增樣式的構成中，css是必不可少的的，然而css中有一些功能的實現可以通過不同的方法實現，通過效果檢視好像並沒有什麼不同，那它們之間到底有什麼本質區別呢，又有哪些概念被我們無意的忽略或者無視了呢，突然想總結總結這一類的問題，本篇隨筆算是本人對於「清除浮動」的歸納吧.
在布局的時候我們經常希望某些內容能夠水平排布，水平排布後，由於內部內容不確定，高度不能簡單的給乙個定值。而如果不給高度，子元素又都浮動了，父盒子就會因為沒有子盒子的支撐而塌陷。
其實在根本上來說，清除浮動主要有二個方法：清除周圍的浮動元素（閉合浮動）， 清除子元素浮動對父元素的影響（清除浮動）。
但這兩種方法可以用不同的方法實現，那我想簡單介紹一下他們的利弊。
原理：單獨使用乙個標籤加上clear:both跑到浮動元素下面，從而消除子盒子浮動造成的父盒子塌陷。
典型**：京東
優點：通俗易懂，容易掌握
缺點：新增很多無意義的空標籤，不符合結構與表現分離的原則，不利於後期維護
原理：讓父盒子形成bfc，
bfc的特性之一就是可以承載浮動元素
優點：不存在結構和語義化問題，**量極少
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素
.clearfix:after
.clearfix
.clearfix:before, .clearfix:after /*在有該類的元素內部元素的前面和後面新增元素*/
.clearfix:after /*只要after兩側有浮動元素，after就會跑到最下面，從而撐開帶有該類名的父盒子*/
.clearfix /*用於相容ie/7/6*/
用display:table是因為
display:block
偽元素仍然有寬度
加了乙個before是為了防止外邊距合併。
閉合浮動（清除浮動）
什麼是css清除浮動？網路上流行的說法是 在非ie瀏覽器 如firefox 下，當容器的高度 height 為auto，且容器的內容中有浮動 float為left或right 的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢位到 容器外面而影響 甚至破壞 布局的現象。這個現象...
清除浮動 or 閉合浮動？
在網頁布局中我們會經常用到浮動，有了它我們可以更容易地實現我們想要的效果，但浮動過後往往會留下一些隱患。這時，我們通常會做一件事清除浮動，但清除浮動也會經常留下隱患，如下 效果圖如下 雖然foot中使用clear both清除浮動，但是main的高度無法自適應子元素的高度，導致塌陷 箭頭所指 下面介...
關於浮動與清除浮動
當給乙個子元素設定浮動屬性時，這個子元素就脫離了文件流，從形式上不再屬於父元素，因此它的父元素的高度就會受到影響，內容不被撐開，為了清除子元素浮動帶來的負面影響，可以有以下方法解決 1,給直接父元素設定inline block或float屬性 不推薦 2,在浮動的子元素後面加上br標籤並設定clea...