面試考點有兩種：
1、頁面效果，考察對浮動的理解。
2、清除浮動的方法。
例1：下面程式的效果圖
"en">"p1">
"p2">test
複製**
例2
"en">"p1">
"p2">test
複製**
之所以呈現出這種效果是因為浮動元素會脫離文件流，塊級元素表現的像浮動框不存在一樣，而文字會圍繞在浮動元素旁邊。
疑問：為什麼p標籤和div呈現出來的效果稍有不同?
原因：p標籤預設存在margin值，將p的margin設為0即可解決。
"en">"p1">
"p2">test
複製**
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。由於浮動框脫離文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。
脫標：脫離標準文件流。
貼邊：左浮動時，元素向左移動，直到它的左邊貼到包含塊的左邊緣。
字圍：文字會圍著浮動元素排開。
收縮：塊級元素設定浮動後，其寬度不再佔滿一行，而是收縮為包含內部元素的寬度即可。
例：
"en">"div1">
"div2">test
"div3">test
複製**
當#div2,#div3的 width:100px;時，div2實際上是被div1浮動遮蓋了一半，由於寬度夠放文字，文字圍繞浮動元素，所以文字在其右面。
當#div2,#div3不設定寬度時，效果如下：
例2：解釋收縮
"en">"div1">我是浮動元素
複製**
例：
"en">"parent">
"div1">
"div2">
"div3">
複製**
本想讓父容器包裹著三個浮動元素，但是浮動帶來***----父容器高度塌陷，於是清理浮動就顯著至關重要。
清除浮動不是不用浮動，清除浮動產生的父容器高度塌陷。
法
一、給浮動元素的父元素新增高度（擴充套件性不好）
例：
#parent複製**如果乙個元素要浮動，那麼它的父元素一定要有高度。有高度的盒子，才能關住浮動。可以通過直接給父元素設定height，實際應用中我們不大可能給所有的盒子加高度，不僅麻煩，並且不能適應頁面的快速變化；另外一種，父容器的高度可以通過內容撐開（比如img），實際當中此方法用的比較多。
法二、clear：both；
在最後乙個子元素的後面新增乙個塊級元素，然後將其設定clear:both,這樣就可以清除浮動。
例：
"parent">
"div1">
"div2">
"div3">
"wrap"/>
複製**
#wrap複製**法
三、偽元素清除浮動 推薦使用
上面那種辦法固然可以清除浮動，但是我們不想在頁面中新增這些沒有意義的冗餘元素，此時如何清除浮動嗎？結合 :after 偽元素和 iehack ，可以完美相容當前主流的各大瀏覽器，這裡的 iehack 指的是觸發 haslayout。
#parent
#parent:after複製**
法
四、觸發形成bfc
這種方案讓父容器形成了bfc（塊級格式上下文），而bfc可以包含浮動，通常用來解決浮動父元素高度坍塌的問題。
bfc的觸發方式
我們可以給父元素新增以下屬性來觸發bfc：
可以給父元素設定overflow:auto，但是為了相容ie最好使用overflow:hidden。
例：
#parent複製**但這種辦法有個缺陷：如果有內容出了盒子，用這種方法就會把多的部分裁切掉，所以這時候不能使用。
總結：清除浮動的方法
css學習 css浮動
1 文件流介紹 網頁布局的核心就是利用css來擺放盒子，把盒子擺放在合適的位置。css的定位機制有以下3種 網頁布局一般需要3種搭配使用 a 普通流 標準流 b 浮動 1 浮動只有左右。2 浮動後找離他最近的父元素靠左 右對齊。3 乙個父盒子裡的子盒子，如果其中乙個子元素有浮動的話，則其他子元素都需...
css浮動和清除浮動
css樣式的float浮動屬性，用於設定標籤物件 如 標籤盒子 標籤 標籤 標籤等html標籤 的浮動布局，浮動也就是我們所說標籤物件浮動居左靠左 float left 和浮動居右靠右 float right 一般情況是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣cs...
CSS浮動和清除浮動
包裹性指的是元素尺寸剛好容納內容,表現得就像diaplay inline block一樣 具有包裹性的其他屬性 display inline block position absolute fixed sticky overflow hidden scroll會使父元素高度塌陷 為了實現文字環繞效果...