1、clear：none,left,right,both 意思解释
清除浮动。
在元素A上使用，则代表对A的左边 / 右边 / 左右两边 不允许浮动元素存在，如果存在，则调整自身。
为none时代表允许浮动存在。（默认值为none）
例如：
<div id="first" class="clear:left"></div>
代表含义：
#first的元素，左边不允许浮动元素存在。如果有，则#first会在原来的基础上下移动一行。
2、需要注意的：
该元素只对自身起作用，无法影响其他元素。
容易出现误解的例子：
<div id="first" class="float:left;"></div> <div id="second" class="float:left;"></div>
对以上样式进行调整将second调整到下一行。
解决方式：对second添加clear:left,而不是对first添加clear:right. 因为clear只对自身起作用，不对其他元素起作用。
必须坚持的原则：谁需要移动，则在谁上面使用clear。
3、看到一个小题目，跟着做了一下。主要使用的clear部分。
请使用CSS控制3个div，实现如下图的布局。
实现效果：
实现代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 .clear{ 6 clear:both; 7 } 8 9 div{ 10 background-color:grey; 11 } 12 13 #first { 14 width:50px; 15 height:150px; 16 float:left; 17 } 18 19 #second{ 20 margin-top:10px; 21 width:50px; 22 height:100px; 23 float:left; 24 clear:left; 25 } 26 27 #third{ 28 margin-left:60px; 29 width:150px; 30 height:260px; 31 } 32 </style> 33 </head> 34 <body> 35 36 <div id="first"></div> 37 <div id="second"></div> 38 <div id="third"></div> 39 40 </body> 41 </html>