关于div布局中float的使用

　　为什么要浮动呢？我是这么认为的。

　　Css里有两种对象（好像有3种的，但是主要用两种）就是块级元素和内联元素；

Div就是块级元素，一个div占据一行，有两个div就需要用到两行，但是我们通常用div来布局，这就需要用到浮动。

　　

　　

　　要达到这样的效果就需要用左浮动float:left；

< div  class =’left’ > div1 </ div >
< div  class =’left’ > div2 </ div >
< div  class =’left’ > div3 </ div >

　　css设置为：

.left{ float:left }

这样三个div就依次从左向右进行排列（当然这是在宽度足够的情况下，如果宽度不够，那个div3就要被挤到下一行去了）。 同理：float:right 就是从右往左排了。

　　 但是如果这3个div下面还有第四，第五个div，我们又不需要它们向上图一样从左往右排列，想要恢复成块级元素那样，一个div占一行的情况，那么我们就需要用到clear属性。

　　

< div  class =’left’ > div1 </ div >
< div  class =’left’ > div2 </ div >
< div  class =’left’ > div3 </ div >
< div  class =’clearFloat’ > div4 </ div >
< div > div5 </ div >

　　css设置为：

.clearFloat{ clear:left;}  

我们经常看到很多直接用clear:both，这个就是指把两个浮动（left和right）都清除掉，恢复成块级元素的特征。　

　　另外，还有一种内联元素，比如span，它就不是一个元素占一行，有多个span的话，它们就分布在同一行。但是为什么不能用span来布局呢，因为内联元素不能设置高度，就是一个行的高度。

转载于:https://www.cnblogs.com/moonflower/archive/2010/01/15/1648366.html