css中的清除浮动

1、clear：none,left,right,both 意思解释

清除浮动。

在元素A上使用，则代表对A的左边 / 右边 / 左右两边不允许浮动元素存在，如果存在，则调整自身。

为none时代表允许浮动存在。（默认值为none）

例如：

代表含义：

#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>