float

深入理解float

设计初衷

float 最早的设计目的是用于图片，使文字能够环绕在图片周围

特点：浮动的块虽然脱离的正常的文档流，但是还会占有正常文档流的文本空间

eg:是文字环绕图片

<div style="width:500px;overflow:hidden; _zoom:1;">  
	     <div id="empty" style="float:right;width:1px;height:100px"></div>  
	     <div style="float:right;clear:right;margin:20px">  
	         <img src='' />
	     </div>  
	     <p>文字</p>  
	 </div>

float 特性

包裹性

标签宽度会收缩至内部元素大小

拥有包裹性的元素：

float浮动的元素
position为absolute或fixed的元素
display为inline-block, table-cell, table-caption, inline-flex，table的元素

破坏性

• 1.脱离文档流
• 2.高度塌陷，也就是父元素在高度计算的时候会忽略浮动的元素。

拥有破坏性的元素：

float浮动的元素
position为absolute的元素

清空格

float与absolute区别

脱离文档流

• float只是脱离文档流但还是占用文字空间。
• absolute 完全脱离文档流，不对其他元素产生影响。

高度塌陷

• float高度塌陷可以清楚
• absolute高度塌陷不可以清楚

清楚浮动

* clear:both;

*overflow:hidden;

*.clearfix:after{
    content:'';
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility: hidden;
}
.clearfix{
    zoom:1;
}