知识点:
清除(clear)的意思可以理解为把这个元素指定方向的内容给移走。例如clear:both; 就是指这个元素左右两边的内容给排除开,相当于这个元素独立成一行,其它元素不管宽度大小,都不能和这个元素并排显示。如果是clear:right;就相当于这个元素右边的内容会被排除开,但是左边的不会,仍然可以在同一行显示。
1.在一个大盒子里面放两个浮动的小盒子,这种情况大盒子会认为自己里面没内容,而恰恰我们不会给大盒子加宽度的。遇到这种问题我们经常用clear来实现!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div_box{width: 500px;background-color: red;}
#div_left{width: 100px;height: 100px;background-color:#0f0;margin-left:10px;float:left;}
#div_right{width: 100px;height: 100px;background-color:#00f;margin-left:10px;float:left;}
.clear{clear:both;}
</style>
</head>
<body>
<div id="div_box">
<div id="div_left"></div>
<div id="div_right"></div>
<div class="clear"></div>
</div>
</body>
</html>