css之清除浮動

這幾天先整理下清除浮動的方法；

產生問題的原因：在乙個容器中，有多個浮動的子元素，會造成顯示結果意想不到的問題。

在css規範中，浮動定位不屬於正常的文件流，而是獨立定位的。

浮動元素在文件流空出的位置，由後續的(非浮動)元素填充上去：塊級元素直接填充上去，若跟浮動元素的範圍發生重疊，浮動元素覆蓋塊級元素。內聯元素：有空隙就插入。這個定位是不同的。

關於css的定位機制：普通流，浮動，絕對定位（position：fixed是position：absolute的乙個子類）。浮動的框可以左右移動，直到碰到另乙個浮動元素或父元素內容區的邊界（不包括padding）；

所以才說浮動定位不屬於正常的頁面流。文件中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，就會出現包含框不會自動伸縮高度類筆盒浮動元素。

所以，只含有浮動元素的父容器在顯示時不需要考慮子元素的位置，就造成顯示父容器像空容器一樣。

1.新增額外空標籤

優點：簡單，**少，瀏覽器相容好；

缺點：引入無意義標籤，有違結構和表現的分離，很不利於後期維護；

body,div,p

.div1
.left
.contant
.right
.clear

left

contant
right
這是一段測試餘元

優點：**少，不存在結構和語義化的問題；

缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素；overflow:hidden會導致中鍵失效。

原理：這裡涉及到bfc,詳細可參考張鑫旭的部落格css深入理解流體特性和bfc特性下多欄自適應布局，以及夢想天空的前端精選文摘：bfc 神奇背後的原理

當父元素設定以為overflow：hidden時，觸發bfc,計算bfc的高度時，浮動元素也參與計算，所以父元素高度撐開。

bfc布局規則：

以下元素會觸發bfc:

body,div,p

.div1
.left
.contant
.right

left

contant
right
這是一段測試餘元

優點：結構和語義化完全正確,**量居中

缺點：復用方式不當會造成**量增加

body,div,p

.div1
.clearfix:after
.clearfix
.left
.contant
.right

left

contant
right
這是一段測試餘元

CSS之清除浮動

標籤可以是div br hr 在浮動元素後使用乙個空元素如 並在css中賦予.clear屬性即可清理浮動。亦可使用 或來進行清理。優點 簡單，少，瀏覽器相容性好。缺點 需要新增大量無語義的html元素，不夠優雅，後期不容易維護。在浮動元素下加 clear，但是在ie6下，塊元素有最小高度，即當hei...

CSS之清除浮動

一 清除浮動的目的。1 當乙個父元素的高度不寫或為auto時，而且這個父元素內又有浮動的子元素，那麼這時候該父元素的高度將不會自動適應子元素的高度，也可以說高度是0px 有如下 123123 此 父元素高度不設定，而且裡面又有左浮動高度為300px的子元素。實際顯示效果為 可以看到，父div僅僅顯示...

css之清除浮動

清除浮動 在非ie瀏覽器 如firefox 下，當容器的高度為auto，且容器的內容中有浮動 float為left或right 的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢位到容器外面而影響 甚至破壞 布局的現象。這個現象叫浮動溢位，為了防止這個現象的出現而進行的css處...