子元素使用float,如何撐開父元素

2021-09-29 12:57:04 字數 933 閱讀 8902

子元素使用float,導致其脫離文件流,父元素塌陷問題的解決方法:

html

"all1"

>

"left1"

>

1div

>

"left2"

>

1div

>

style

="clear

:both;

">

div>

div>

css

#left1

#left2

#all1

這個方法的關鍵在於用了clear:both來清除了浮動元素,把父元素all1撐開。

class

="aa"

>

class

="bb"

>

sffsssssssssssssdiv

>

class

="cc"

>

sffssdiv

>

div>

css

aa

.bb.cc

此方法的重點在於,子元素有float之後,父元素需要設定乙個overflow:hidden;,這樣就可以自動撐開父元素aa。

overflow:hidden要有寬度或者高度才會溢位部分隱藏,如果外部盒子沒有寬度或者高度,裡面又是浮動元素,就會被撐開

子元素使用float 父元素撐開方法

乙個div包含了多個子div,並且子div使用了浮動後,父div確不能被撐開,如下圖 部分 如下 15 6 7 two 8 one 9 如果想要撐開父元素可以採用以下方法 方法一 父元素設定overflow以及zoom,樣式如下 1方法二 父元素也是設定浮動效果,樣式如下 1此方法有個缺陷是,父元素...

子Div使用Float後如何撐開父Div

乙個div包含了多個子div,並且子div使用了浮動後,父div確不能被撐開,如下圖 部分 如下 1 style 2 div1 3 div2,div3 4style 56 div id div1 7 div id div2 twodiv 8 div id div3 onediv 9div 如果想要撐...

子Div使用Float後如何撐開父Div

乙個div包含了多個子div,並且子div使用了浮動後,父div確不能被撐開.部分 如下 two one 如果想要撐開父元素可以採用以下方法 方法一 父元素設定overflow以及zoom,樣式如下 方法二 父元素也是設定浮動效果,樣式如下 此方法有個缺陷是,父元素的寬度需要設定。方法三 在新增乙個...