浮动

原理：

float属性创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

 

特性：

1.脱离文档流（不保留原先的位置）

2.一行内显示并且元素顶部对齐

3.具有行内块元素的特性（任何元素都可以浮动）

4.文本环绕

5.默认宽度失效（但是可以重新设置）

6.会使浮动元素变成块元素

7.无法使用margin：auto居中

注意：

1.如果块级元素没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

2.浮动的元素只会影响浮动元素后面的文档流，不会影响前面的文档流

 

为什么要清除浮动：

子元素浮动不占位置，父级元素没有设置高度时，父级元素高度为0，影响后边的文档流

 

清除浮动的本质：

1.清除浮动元素造成的影响（父级元素没有高度，影响后边的文档流）

2.如果父元素本身有高度，则不需要清除浮动

 

清除浮动的策略：

闭合浮动，只让浮动元素在父级元素内部产生影响，不影响父级元素外部其它的盒子

 

清除浮动的方法：

1.额外标签法（隔墙法，在浮动元素末尾添加一个空的标签(必须是块级元素)，给此标签设置clear：both;）

2.父级添加overflow属性（缺点：无法显示溢出的部分）

3.父级添加after伪类元素

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

4.父级添加双伪类元素

.clearfix:before,.clearfix:after{
        content: "";
		display: table;
	}
.clearfix:after{
		clear: both;
	}
.clearfix{
		/*IE6,7专有*/
		*zoom:1;
	}

5.父级元素加height

6.浮动可以清除浮动