我們看到下面這個例子：這裡我們給定了兩個盒子，這兩個盒子分別在box1，box2中：p1 ，p2同時給他們浮動（這裡都是向左浮 動）
，給定寬高，和 背景。 p1 ，p2的父親分別是box1 ，box2。
此時我們想象的執行結果應該是這個
樣子：但是我們可以把box1和box2想象成兩個國家box1國家和box2國家都沒有設定高（沒有領土意識），也
就沒有國界一樣如果，box1和box2沒有了國界那麼aaa ， bbb所呈現的真實效果如下：
補充：這裡有乙個a沒有看見的原因是因為，我設定p1盒子的寬度是20px，但是又因為字母「a」本身有寬度
，
所以導 致「aaa」的寬度大於20px，大家才會看到上面的效果。
後面那個國家（box1）的人民（bbb）會貼到前面那個國家（box2）的人民（aaa）中去，而這都是因
為沒有（清除浮動）領土意識，沒有國界（height）的原因。這便是導致要清除浮動的原因。
如果給出了正確的高，也就是box1的height設定為「>=」20px,那麼就會把p2(bbb)擠下去,這樣p2就無法侵犯aaa所在的國家（box1）了。
根據前面的介紹我們知道了，乙個國家（box1）要有領土(height)意識，在沒有高的情況下我們可以給這那麼這堵牆是什麼呢?兩個國家之間修一堵和平牆，以這堵牆為分界線來劃分自己的領地，讓自己的子民（p1,p2）都不允許越過這
堵牆，這樣同樣可以達到清除浮動的效果。
這堵牆修在外面，故稱為 「外牆法」
同樣也可以修在裡面，我們成為「內牆法」
這個乙個奇淫巧技，和瀏覽器的渲染又關係，這裡不做解釋，具體原因是因為overflow除了值等於visible之外會產生bfc(塊級格式化上下文)，本來這個屬性是用來處理溢位的但是，這裡可以用來清除浮動。 做法如下：
可能還有一些處理浮動的方法，這裡只介紹比較經典的做法，像給盒子加屬性clear:both;也可以清除浮動但是會使得margin失效，所以這裡沒有做詳細的介紹。
清除浮動css詳解
css定位position static relative abslute fixed 1.relative相對定位 s1 內容一 special class s1 內容一 class s1 內容一 class s1 內容一 class s1 內容一 class s1 內容一 view code l...
詳解CSS浮動的清除
浮動的作用比較強大，常用於專案的橫向排列 ok,先給乙個小例子 下面也會以這個小例子來講 先看html charset utf 8 head class boxall class box1 id b box1div class box2 id b box2div class box3 id b bo...
清除浮動的原理詳解
前端布局用的最多的是float 脫離文件流，浮動起來。浮動的框可以左右移動，直到遇到另乙個浮動框或者遇到外邊緣的包含框 bcf 正是因為當元素浮動之後，不會影響塊級元素的布局，只會影響內聯元素布局，會造成父級元素高度坍塌。此時文件流中的普通流就會表現得該浮動框不存在一樣的布局模式。當包含框的高度小於...