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

2022-09-25 01:39:08 字數 650 閱讀 8423

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

部分**如下:

複製**

**如下:

twoone

&l程式設計客棧t;/div>

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

方法一:

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

複製**

**如下:

方法二:

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

複製**

**如下:

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

方法三:

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

複製**

**如下:

ulsdpfm

two

one

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

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

本文標題: 子div使用float後撐開父div的幾種方法

本文位址: /web/css/82457.html

子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 如果...