css開發過程中清楚浮動是難以避免要使用的,今天犧牲午覺的時間整理一下吧!
一、給父級加高度:這樣肯定不存在父級坍塌的問題了;
問題:擴充套件性不好,如果要自適應高度就悲催了。
二、讓父級浮動:父級和子級都浮動就不存在這個問題了;
問題:頁面中所有元素都加浮動,margin左右自動失效(floats bad !),
再說了所有的父級都能浮動嗎,也有擴充套件性的問題。
三、給父級加display:inline-block 清浮動方法:
問題:margin左右自動失效;
四、空標籤清浮動
在浮動元素下加
.clear
在浮動元素下加
問題:ie6 最小高度 19px;(解決後ie6下還有2px偏差),不符合工作中:結構、樣式、行為,三者分離的要求。
五、after偽類 清浮動方法(現在主流方法)
.clear:after.clear
after偽類: 元素內部末尾新增內容;
:after ie6,7下不相容
zoom 縮放
a、觸發 ie下 haslayout,使元素根據自身內容計算寬高。
b、ff 不支援;
CSS清除浮動常用方法小結
本文 常用的清除浮動的方法有以下三種 此為未清除浮動源 執行 無法檢視到父級元素淺黃色背景。left right 三種清除浮動方法如下 1 使用空標籤清除浮動。我用了很久的一種方法,空標籤可以是div標籤,也可以是p標籤。我習慣用,夠簡短,也有很多人用,只是需要另外 為其清除邊框,但理論上可以是任何...
CSS清除浮動的常用方法
浮動溢位和高度塌陷 因為浮動會使當前標籤產生向上浮的效果,同時會影響到前後標籤 父級標籤的位置及 width height 屬性。而且同樣的 在各種瀏覽器中顯示效果也有可能不相同,這樣讓清除浮動更難了。解決浮動引起的問題有多種方法,但有些方法在瀏覽器相容性方面還有問題。11111111 222222...
css清除浮動方法
html 浮動 不想被浮動影響 css wrap float nofloat 現在雖然加了乙個空的div,但是並沒有給它清除浮動,所以目前的效果就是第三個子元素.nofloat還是收到浮動的影響。ok,現在給.clear加上清除浮動 clear ps 這種情況比較適合元素之間是垂直排列布局的,為了不...