清除浮动 - DIVCSS5

当有浮动布局和普通div共同存在时，会发生如下覆盖的情况

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 #lside {
 height: 200px;
 background: red;
 float: left;
 }
 #rside {
 height: 300px;
 background: green;
 float: right;
 }
 #normal {
 height: 400px;
 background: blue;
 }
 </style>
</head>
<body>
 <div id="lside">我是左边</div>
 <div id="rside">我是右边</div>
 <div id="normal">我不设置浮动</div>
</body>
</html>

所以如果不想被覆盖，就要清除浮动

在CSS中对普通元素设置clear属性

当我们增加 clear: left; 时，代表不让左边浮动盖着自己

 #normal {
 height: 400px;
 background: blue;
 clear: left;
 }

此时清除左浮的div就会贴着左浮的div下边显示，如图：

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css-jiaocheng/tc58557.shtml