css 中的浮动（float）与清除浮动(clear)

1.浮动的目的

#div1{
	background-color: red;
    height:80;
    width:150px; 
}
#div2{
	background-color: green;
    height:100px;
    width:150px;   
}
#div3{
	background-color: blue;
    height:160px;
    width:150px; 
}
#div4{
	background-color: yellow;
    height:200px;
    width:150px; 
}
</style>

文档流中，块元素是单独占一行，为了使块元素能和另一块元素在同一行。

就需要用float属性。float属性设置的元素会脱离文档流产生浮动，左浮动的元素会在左侧跟着一个浮动元素后面，如果前一元素没有浮动，则会另起一行。

<style type="text/css">
#div1{
	background-color: red;
    height:80;
    width:150px;  
}
#div2{
	background-color: green;
    height:100px;
    width:150px;  
     float:left;
}
#div3{
	background-color: blue;
    height:160px;
    width:150px; 
    float:left;
   
}
#div4{
	background-color: yellow;
    height:200px;
    width:150px; 
    float:left;
}
</style>

第2个块起，设置为左浮动，因为第一个没设置浮动，所以B没有在A后面。C设置浮动属性，脱落原来文档流，且前一元素B为浮动元素，故浮动在B元素后。D类似地排在C后。

2.清除浮动的目的

如果一个块元素A设置为浮动,且文档流则紧跟着的另一元素B也设置浮动，那么根据浮动的特点，我们将会看到两个元素会在同一行的布局效果（宽度允许的情况）。同样地如果紧跟后面的C，D元素如果也是浮动的，那么ABCD四个元素在宽度允许的条件下，会在同一行。

如果有这样的需求，CD元素要另起一行。一种思路是，可以设置C不浮动，D还是浮动。但是，结果是这样的，D没有与C在同一行，因为C不是浮动的，故D会另起一行，而且C被A部分遮挡。

这时候就需要清除浮动了。可以将C元素设置清除左浮动（右浮动类似），意思是C元素左边的元素不能是浮动元素，因为B元素是浮动的，所以C元素不能跟着B元素后面排列，故另起一行。

<style type="text/css">
#div1{
	background-color: red;
    height:80;
    width:150px; 
    float:left;
}
#div2{
	background-color: green;
    height:100px;
    width:150px;  
     float:left;
}
#div3{
	background-color: blue;
    height:160px;
    width:150px; 
    float:left;
   clear:left;
}
#div4{
	background-color: yellow;
    height:200px;
    width:150px; 
    float:left;
}