css float属性

出处：http://luopq.com/2015/11/08/CSS-float/

 

float故名思议就是浮动，设置了float的元素会根据设置属性值向左向右浮动，并且会脱离文档流，也会使元素生成一个块级框，能够设置width和height。

设置了float属性的元素影响的不仅仅是自己，还有其周围的元素。

包含块：浮动元素的包含块就是离浮动元素最近的块级祖先元素。

浮动元素的规则：

1、浮动元素在浮动的时候，其margin不会超过包含块的padding（当然要在margin大于0的情况下）；

2、多个浮动元素，后面的浮动元素的margin不会超过前面浮动元素的margin，简单说浮动元素不会发生重叠现象；

3、如果两个元素一个向左浮动，一个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。当包含快足够大时，两个一个在左一个在右；当包含快比较小时，两个浮动元素会上下排列，但不会重叠。

4、浮动元素顶端不会超过包含块的内边界底端，如果有多个浮动元素，下一个浮动元素的顶端不会超过上一个浮动元素的底端