CSS浮动

1.浮动

1.1浮动特性

1. 设置浮动特性后的元素会脱离标准流(脱标)，并且浮动的盒子不再保留原先的位置，就像队列中的一个人突然起飞，他原先的位置由后来者占据。
2. 多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐，如一行不能容纳所有盒子，则会再开一行。(浮动元素相互紧贴在一起不会有缝隙。）
3. 若多个盒子中部分盒子设置了浮动，设置浮动的盒子并不会向前覆盖标准流的盒子，而是保持原来的位置，而后面标准流的盒子则会到浮动盒子的下面。就像队列中的人垂直上升浮动，后面人向前补位。(即浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。)
4. 无论是块级标签还是行内标签，都可以设置浮动，设置浮动后会具有与行内块元素相似的特性。

1.2清除浮动

1.2.1为什么要清除浮动

	开发中会经常不直接设置固定父盒子高度，而是用子盒子撑开的方式来代替，但是一旦子盒子设置浮动，子盒子脱离了标准流，对父盒子来说父盒子的高度就变为了0px，继而影响下方标准流的盒子。

1.2.2清除浮动注意点

1. 父盒子本身有高度则不需要清除浮动。
2. 清除浮动后，父盒子就会根据浮动的子盒子自动检测高度。父盒子有了高度，就不会影响下面的标准流。

1.2.3清除浮动的方法

1. 额外标签法（隔墙法），是W3C推荐的做法。

2. 父盒子添加overflow属性。

3. 父盒子添加after伪元素。
   

4. 父盒子添加双伪元素。