網頁布局之float

標籤：sla   設定   zoom   還需要   包含   內容   log   box   位置   

一、浮動的原理
浮動是讓某元素脫離標準流，漂浮在標準流之上的一種布局方式。任何元素被設定為浮動元素後，就表明它是區塊層級元素，擁有寬高屬性。
二、浮動帶來的影響
1、影響它的兄弟元素的位置
一個元素設定了浮動樣式後，會影響它的兄弟元素，至於如何影響，要看它的兄弟元素是區塊層級元素還是內嵌元素。如果兄弟元素是區塊層級元素，會無視這個浮動元素，即兄弟元素和浮動元素共處同行，浮動元素會覆蓋兄弟元素。除非這些 div 設定了寬度，並且父元素的寬度不足以包含它們，這樣兄弟元素才會被強制換行；如果兄弟元素是內嵌元素，則會儘可能圍繞浮動元素。
2、會導致父元素高度自動清零
浮動元素脫離了普通流，導致父元素高度塌陷。
閉合浮動：使浮動元素閉合，從而減少浮動帶來的影響。
三、閉合浮動的方法大體分為兩類
1、利用clear屬性。可以通過在浮動元素末尾添加一個帶有clear: both屬性的空div 來閉合元素，也可以通過:after虛擬元素在浮動元素末尾添加一個內容為一個點並帶有clear: both屬性的元素來閉合元素。
A、用空div閉合浮動

.clr1{ clear:both; } <div class="box1"> <div class="fl">左浮動</div> <div class="fr">右浮動</div> <div style="clr1">清除浮動</div></div>

B、用:after虛擬元素閉合浮動

.clr2:after{     clear:both;     display:block;     content:‘.‘;     overflow:hidden;     visibility:hidden;     height:0; } //Google,Firefox .clr2{     clear:both;     zoom:1; } //IE <div class="box2 clr2"> <div class="fl">左浮動</div> <div class="fr">右浮動</div></div>

2、觸發該浮動元素父元素的BFC，使其父元素可以包含浮動元素。
A、給浮動元素的父元素添加浮動，不建議採用。
B、給浮動元素的父元素添加display: table-cells，這樣會改變盒子模型，也不建議使用。
C、把浮動元素的父元素overflow屬性設為hidden或auto，可以閉合浮動。另外在IE6中還需要觸發hasLayout，例如為父元素設定容器寬高或設定zoom：1。

網頁布局之float