浮动

传统网页布局的三种方式

1.普通流（标准流/文档流）
2.浮动
3.定位

为什么需要浮动

浮动可以改变元素标签默认的排列方式。
最经典的应用：可以让多个块级元素一行内排列显示。

浮动

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

div{
	float: none;/*默认*/
	float: left;/*元素向左浮动*/
	float: right;/*元素向右浮动*/
}

浮动特性

1.浮动元素会脱离标准流（脱标）。
2.浮动的元素会一行内显示并且元素顶部对齐。
3.浮动的元素会具有行内块元素的特性。
4.浮动的盒子不再保留原先的位置。

注意：
1.如果多个盒子设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
2.浮动的元素时互相帖靠在一起的（不会有缝隙），如果父级元素装不下这些盒子，多出的盒子会另起一行对齐。
3.如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，他的大小根据内容来决定。

清除浮动

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

1.清除浮动的本质就是清楚浮动元素造成的影响。
2.如果复合自本身有高度，则不需要清除浮动。
3.清除浮动后，父级元素就会根据浮动的子盒子自动检测高度，父级有了高度就不会影响下面的标准流了。

额外标签（隔墙法）

在浮动元素的末尾添加一个空标签。
注意：这个空标签必须是块级元素，不能是行内元素。

.clear {
	clear: both;
}

<div class="father">
	<div class="child1"></div>
	<div class="child2"></div>
	<div class="child3"></div>
	<div class="clear"></div>
</div>

父级添加overflow属性

将其属性设置为hidden\auto\scroll

.father {
	overflow: hidden;
}

父级添加after伪元素

.clearfix:after {
	content: "";
	diaplay: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
/*照顾IE6、7版本浏览器*/
	*zoom: 1;
}

<div class="father clearfix">
	<div class="child1"></div>
	<div class="child2"></div>
	<div class="child3"></div>
</div>

父级添加双伪元素

.clearfix:before,.clearfix:after {
	content: "";
	diaplay: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
/*照顾IE6、7版本浏览器*/
	*zoom: 1;
}

<div class="father clearfix">
	<div class="child1"></div>
	<div class="child2"></div>
	<div class="child3"></div>
</div>