浮动不会占用正常的文档流位置:
<body>
<!--正常的文档流是从上到下,使用 float 属性的div 不占文档流-->
<!--使用 clear 属性清除浮动-->
<div style="float: left; width: 100px;height: 200px; background-color: red"></div>
<div style="width: 200px;height: 200px; background-color: greenyellow"></div>
<div style="width: 200px;height: 200px; background-color: blue"></div>
</body>
清除浮动
<body>
<!--正常的文档流是从上到下,使用 float 属性的div 不占文档流-->
<!--使用 clear 属性清除浮动-->
<div style="float: left; width: 100px;height: 150px; background-color: red"></div>
<div style="clear: left"></div>
<div style="width: 150px;height: 150px; background-color: greenyellow"></div>
<div style="width: 150px;height: 150px; background-color: blue"></div>
</body>