css布局之float

float特点：

• 当元素应用了float属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。
• 只有横向浮动，并没有纵向浮动。
• 会将元素的display属性变为block。
• 浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片），与应用了position的元素相比浮动元素并不会覆盖后一个元素。
• 浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）
   

清除浮动的方法

方法一：添加新的元素 、应用 clear：both

.clear{
   clear:both; 
   height: 0; 
   height: 0; 
   overflow:hidden;
}

方法二：父级div定义 overflow: auto

.over-flow{
    overflow: auto; 
    zoom: 1; //处理兼容性问题
}

方法三： 伪类 :after 方法 outer是父div的样式

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
.outer :after {
   clear:both;
   content:'.';
   display:block;
   width: 0;
   height: 0;
   visibility:hidden;
}

 

position与float的兼容性问题：

• 元素同时应用了float、position: relative、（top/left/bottom/right）属性后，则元素先浮动到相应的位置，然后在根据（top/left/bottom/right）所设置的距离来发生偏移。
• 元素同时应用了position: absolute及float属性，则float失效。
• 第一个元素应用了position之后会覆盖接下来的float元素（如果两个元素所处的位置相同）。
• 同时应用position: absolute和float: left会导致清除浮动无效（position: relative则可以清除浮动）。