如下代碼
<style type="text/css">
.yellow{
background-color:yellow;
border:2px solid #333333;
width:200px; height:100px;
}
.blue
{
background-color:blue;
border:2px solid #333333;
height:50px;
width:400px;
}
.red
{
background-color:red;
border:2px solid #333333;
width:100px;
height:100px;
}
.pink
{
background-color:pink;
border:2px solid #333333;
height:60px;
width:230px;
}
</style>
</head>
<body>
<div class="yellow">div1</div>
<div class="blue">div2</div>
<div class="red">div3</div>
<div class="pink">div4</div>
</body>
</html>
結果如下
image.png
如果給2區域添加float:left，
結果如下,div3的一部分被遮擋了。
圖3
如果給2和3都加上float：left?？梢钥吹?，2浮動在左邊，3跟著浮動在2的右邊，也就是說設置兩個相鄰元素同時浮動左側的話，會自動按順序排列。
image.png
如果設置234都是float:left結果如圖。由于4區域緊跟著3的話空間不夠了，所以被擠到下一行了。
image.png
如果縮小瀏覽器窗口，則會
image.png
如何解決上述圖3的問題？
只要在div3的相關代碼里加上clear:both就可以了。結果如圖
image.png
