清除浮動影響與overflow

2021-07-28 18:04:36 字數 1100 閱讀 7317

浮動流與標準流的高度問題:

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 多學...