浮動流與標準流的高度問題:
1.在標準流中內容的高度可以撐起父元素的高度
2.在浮動流中浮動的元素是不可以撐起父元素的高度的
給前面乙個父元素設定高度
注意點:
在企業開發中, 我們能不寫高度就不寫高度, 所以這種方式用得很少
給後面的盒子新增clear屬性
clear屬性取值:
none: 預設取值, 按照浮動元素的排序規則來排序(左浮動找左浮動, 右浮動找右浮動)
left: 不要找前面的左浮動元素
right: 不要找前面的右浮動元素
both: 不要找前面的左浮動元素和右浮動元素
注意點:
當我們給某個元素新增clear屬性之後, 那麼這個屬性的margin屬性就會失效
隔牆法外牆法
1.在兩個盒子中間新增乙個額外的塊級元素
2.給這個額外新增的塊級元素設定clear: both;屬性
注意點:
外牆法它可以讓第二個盒子使用margin-top屬性
外牆法不可以讓第乙個盒子使用margin-bottom屬性
內牆法
1.在第乙個盒子中所有子元素最後新增乙個額外的塊級元素
2.給這個額外新增的塊級元素設定clear: both;屬性
注意點:
內牆法它可以讓第二個盒子使用margin-top屬性
內牆法它可以讓第乙個盒子使用margin-bottom屬性
3.外牆法和內牆法區別?
外牆法不能撐起第乙個盒子的高度, 而內牆法可以撐起第乙個盒子的高度
在企業開發中不常用隔牆法來清除浮動
清除浮動的第四種方式
利用偽元素選擇器清除浮動
本質上就是內牆法, 只不過是直接通過css**新增了內牆, 其它特性和內牆法都一樣
注意點:
ie6中不支援這種方式, 為了相容ie6必須給前面的盒子新增*zoom:1;屬性
6.verflow: hidden作用
可以將超出標籤範圍的內容裁剪掉
清除浮動
可以通過overflow: hidden;讓裡面的盒子設定margin-top之後, 外面的盒子不被頂下來
浮動的影響與清除浮動
影響1 div1 div2 div3,要實現dev1 div2 在第一排顯示,div3另起一行?方法 給div1 div2加浮動,1和2會脫離正常流,因為div3屬於正常流會上到第一排,並且被1和2覆蓋 就是為什麼要清除浮動,消除浮動影響 方法1 加乙個空div,clearfix 在div3前加乙個...
清除「浮動」影響
清除浮動是每乙個 web前台設計師必須掌握的技能。共8種方法。浮動會使當前標籤產生向上浮的效果,同時會影響到前後標籤 父級標籤的位置及width height屬性。而且同樣的 在各種瀏覽器中顯示效果也有可能不相同,這樣讓清除浮動更難了。解決浮動引起的問題有多種方法,但有些方法在瀏覽器相容性方面還有問...
10 浮動和清除浮動影響
float 浮動 屬性 1 改變塊元素 block element 物件的預設顯示方式。2 浮動元素 float 會被移出標準流,但是沒有脫離檔案流。3 float開始之初是為了實現文字環繞。將塊顯示標記左右排列的時候使用浮動屬性。aa,bb,cc bb cc style clear屬性 cc 多學...