讓Div內層將DIV外層撐開

2021-05-27 19:49:33 字數 1303 閱讀 2526

在css排版中,如果乙個層中的層使用了float浮動的話,那麼就有可能會出現外層沒有被內層撐開的情況,如以下**所示:

<

divstyle="width:300px; background-color:red;"

>

測試  

<

divstyle="width:100px; height:100px; background-color:green; float:left; margin:10px;"

>

左邊  

div>

div>

如果要解決這個問題,可以在外層的css中加上「overflow:auto」。

在css中overflow屬於用來說明當內容溢位元素框時要怎麼處理,從上圖中可以看出,內層已經溢位了外層,所以需要使用overflow屬性來指如何顯示內層中。overflow屬性的預設值是visible,也就是不管它是怎麼溢位的,溢位的內容不裁剪,任其顯示在元素框外面。

除了visible值之後,overflow屬性還有以下幾個值:

由於本例中,外層的css沒有指定overflow屬性,所以預設為visible,也就是不管它怎麼個溢位法,所以,只要將外層的css中加上overflow:auto,如以下**所示:

<

divstyle="width:300px; background-color:red; overflow:auto;"

>

外層  

<

divstyle="width:100px; height:100px; background-color:green; float:left; margin:10px;"

>

內層  

div>

div>

也許有人會說,為什麼設定overflow:auto之後,外層就包含了內層,而不是將溢位的那部分使用滾動條顯示出來呢?這是因為沒有指定外層的高度,所以它就自適應了。如果指定了外層的高度,而內層的高度又大於外層的高度,那麼就會顯示滾動條了。如以下**所示。

<

divstyle="width:300px; background-color:red; overflow:auto; height:80px;"

>

外層  

<

divstyle="width:100px; height:100px; background-color:green; float:left; margin:10px;"

>

內層  

div>

div>

讓內層Div將外層Div撐開

在css排版中,如果乙個層中的層使用了float浮動的話,那麼就有可能會出現外層沒有被內層撐開的情況,如以下 所示 divstyle width 300px background color red 測試 divstyle width 100px height 100px background co...

讓內層將外層撐開

在css排版中,如果乙個層中的層使用了float浮動的話,那麼就有可能會出現外層沒有被內層撐開的情況,如以下 所示 執行結果如下圖所示 如果要解決這個問題,可以在外層的css中加上 overflow auto 在css中overflow屬於用來說明當內容溢位元素框時要怎麼處理,從上圖中可以看出,內層...

div容器無法將外層div容器撐開

當div1裡面巢狀有乙個div2,當div2設定了浮動,那麼div1是無法被撐開的,也就是說div2在這裡相當於浮在了頁面上方,跟div1不在同乙個層面,導致了div2無法把div1給撐開。可以有兩種解決辦法 1 清除浮動 2 給外層div設定overflow auto 這2種方法都可以實現div2...