div不能被撐開的處理方法

當DIV1里面嵌套有一個DIV2，當DIV2設置了浮動，那么DIV1是無法被撐開的，也就是說DIV2在這里相當于浮在了頁面上方，跟DIV1不在同一個層面，導致了DIV2無法把DIV1給撐開，這是一個老生常談的問題，也是困擾很多剛接觸DIV+CSS的朋友的一個問題。

 

先來看看這個問題的實際效果，如下圖：

 

 

這里本來DIV1是套在了DIV2的外面的，如果是使用表格做的話，那么DIV1肯定被撐開了，如下圖：

 

 

怎么解決這個浮動之后無法把容器撐開情況，解決方法有兩種：

 

 

<div style=”clear:both;”></div>

 

這行代碼是清除浮動。

 

 

overflow: auto;

 

這兩種方法都可以實現DIV2把DIV1撐開。不過這里建議大家使用第一種方法，要養成一個習慣，在浮動應用完后消除浮動，這樣后面的DIV就不會繼承這個浮動（就像在編程的時候，在打開數據庫，操作完后，要養成個習慣在后面把數據庫關閉）。

 

因為浮動這個東西會被繼承，除非消除這個浮動，才不會讓后面接著的DIV受到繼承。不僅是DIV標簽會繼承，其他的標簽也會有繼承的效果。