子Div使用Float後撐開父Div的幾種方法

2021-08-15 04:14:07 字數 523 閱讀 5781

乙個div包含了多個子div,並且子div使用了浮動後,父div確不能被撐開,如下圖: 

部分**如下: 

複製**

**如下:

twoone

如果想要撐開父元素可以採用以下方法: 

方法一: 

父元素設定overflow以及zoom,樣式如下: 

複製**

**如下:

方法二: 

父元素也是設定浮動效果,樣式如下: 

複製**

**如下:

此方法有個缺陷是,父元素的寬度需要設定。 

方法三: 

在新增乙個子元素,並設定clear樣式: 

複製**

**如下:

twoone

此方法新增了乙個div元素,有些情況下可能這個div會影響元素的遍歷。 

以上方法 使用doctype html 4.0 以及 doctype xhtml 1.0 的 transitional 在ff ie6 ie7 ie8 下測試通過,其他瀏覽器沒有測試。

子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,樣式如下 方法二 父元素也是設定浮動效果,樣式如下 此方法有個缺陷是,父元素的寬度需要設定。方法三 在新增乙個...

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

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