當DIV1裡面嵌套有一個DIV2，當DIV2設置了浮動，那麼DIV1是無法被撐開的，也就是說DIV2在這裡相當於浮在了頁面上方，跟DIV1不在同一個層面，導致了DIV2無法把DIV1給撐開，這是一個老生常談的問題，也是困擾很多剛接觸DIV+CSS的朋友的一個問題。
先來看看這個問題的實際效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<div style="background-color:red;width:100px;">div 1
<div style="background-color:green;float:left;height:300px;width:40px;">div float</div>
</div>
</body>
</html>
這裡本來DIV1是套在了DIV2的外面的，如果是使用表格做的話，那麼DIV1肯定被撐開了
那如何解決這個浮動了之後無法把容器撐開的局面呢？解決的方法這裡介紹2仲。
第一種：在浮動結束的容器後面加上這段代碼
<div style=”clear:both;”></div>
意思是清除浮動。
第二種：在外層DIV，也就是這裡的DIV1的CSS裡面加入以下CSS代碼
overflow: auto;
這2種方法都可以實現DIV2把DIV1撐開。不過這裡建議大家使用第一種方法，要養成一個習慣，在浮動應用完後消除浮動，這樣後面的DIV就不會繼承這個浮動（就像在編程的時候，在打開數據庫，操作完後，要養成個習慣在後面把數據庫關閉）。也就是說浮動這個東西會被繼承，除非消除這個浮動，才不會讓後面接著的DIV受到繼承。其實不僅是DIV，其他的像P等其他的容器都會有繼承的效應，大家要養成一個習慣記得要消除浮動。
完整案例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hovertree</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<div style="background-color:red;width:100px;overflow:auto;">div 1
<div style="background-color:green;float:left;height:300px;width:40px;">div float</div>
</div>
</body>
</html>