css浮动

1、浮动

1、标准流（文档流）：元素按部就班按照自身的特性排列

2、浮动定义：元素会脱离标准普通流的控制，移动到指定位置的过程

3、使用：

(1)     左浮动：float：left

(2)     右浮动：float：right

4、结论

(1)     浮动后的元素会脱离标准流，漂浮在其他没有浮动的盒子上边

(2)     浮动后的两个块状元素会在同一行显示

(3)     浮动后的元素不占有原来的位置

(4)     浮动后的元素不会超出父元素的范围

(5)     浮动后的元素自动的转化为行内块元素，浮动后的元素不超过父元素的内边距

2、清除浮动

1、定义：清除浮动：并不是清除浮动，而是清除浮动所带来的影响

2、为什么要清除浮动？

①    浮动后的元素不会撑开的父元素的高度，因为浮动是不占位置的

②    与浮动元素同级的非浮动元素会跟随其后

③    若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

3、如何清除浮动？

①    额外标签法：在浮动元素的后边加上标签

1)        <div style="clear: left;"></div>    

2)        清除左浮动 clear: left

3)        清除右浮动 clear: right

4)        清除左右浮动 clear: both  

5)        优点：通俗易懂，书写方便

6)        缺点：添加了额外的标签，结构化差

②    overflow属性：在父元素中添加

1)        overflow: hidden; 

2)        overflow: scroll; 

3)         overflow: auto; 

4)        优点：但是代码简洁 

5)        缺点：   盒子中多余的内容会被隐藏掉 

③    使用after伪元素清除浮动：给父元素添加

1)        .clearfix::after { content: ‘ ‘; display: block; clear: both; } 

2)        优点：符合闭合浮动思想 结构语义化正确

3)        缺点：IE6-7不支持:after

④    双伪元素清除浮动:给父元素添加after以及before伪元素

1)        .clearfix::after, .clearfix::before {  content: ‘‘;display: table;clear: both; }

2)         优点：代码简洁

3)        缺点：IE6-7不支持:after