css-浮动

1.传统网页布局的三种方式

2.为什么需要浮动？

3.什么是浮动

浮动特性

1. 浮动元素会脱离标准流(脱标)（不再保留原先的位置）

2. 浮动的元素会一行内显示并且元素顶部对齐

3. 浮动的元素会具有行内块元素的特性

浮动使用策略

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧.

浮动布局注意点

4.为什么需要清除浮动（父盒子不设高度）

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会 影响下面的标准流盒子。

5.清除浮动

浮动策略

清除浮动方法

1.额外标签法

2.父级添加 overflow

3.:after 伪元素法

 //给父级添加
.clearfix:after { 

 content: ""; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
 } 
 .clearfix { /* IE6、7 专有 */ 
 *zoom: 1; 

 }

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器

3.双伪元素清除浮动

//给父元素添加 
.clearfix:before,.clearfix:after { 

 content:""; 

 display:table; 
 } 
 .clearfix:after { 
 clear:both; 
 } 
 .clearfix { 
 *zoom:1; 
 } 

优点：代码更简洁

缺点：照顾低版本浏览器