如下代码
<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
