浮动详解

浮动定义

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

浮动特性

1. 浮动元素会脱离文档流
2. 脱离文档流的控制（浮）移动到指定位置（动），俗称脱标，浮动的盒子不再保留原先的位置
3. 浮动的元素会在一行显示并且元素顶部对齐
4. 浮动的元素会具有行内块元素的特性
5. 如果行内元素有了浮动，则不需要转换为块级/行内块元素就可以直接给宽度和高度；如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
6. 浮动的盒子中间是没有缝隙的，紧挨在一起。行内元素同理。

浮动元素经常和文档流父级搭配使用：

1. 为了约束浮动元素的位置，网页布局一般采取的策略是：
2. 网页布局的第一准则：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右的位置
3. 网页布局的第二准则：先设置盒子大小，再设置盒子位置

一个元素浮动了，理论上其余的兄弟元素也要浮动

1. 浮动的盒子只会影响浮动盒子后边的标准流，不会影响前边的标准流。

为什么要清除浮动？

1. 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动后又不占有位置，最后父级盒子高度为0，就会影响下边标准流盒子的排列布局。
2. 浮动元素不再占用原文档流的位置，所以它会对后边元素的排版产生影响

清除浮动：

1. 本质上是清除浮动元素带来的影响
2. 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下边的标准流了。
3. 策略：闭合浮动：只让浮动在父盒子内部影响，不影响父盒子外边的其他盒子。

清除浮动的方法：

1. 额外标签法：在最后浮动子元素上添加一个额外标签，添加清除浮动的样式【添加的标签必须是块级元素】。
   优点：通俗易懂，书写方便
   缺点：添加许多无意义的标签，结构化较差

 	在最后一个浮动元素后加上空标签
	<div style="clear:both"></div>
	或加上
	<br/>标签`

2. 给父级添加overflow属性，将其属性设置为 hidden， auto ，或 scroll（子不教，父之过）
   优点：代码简洁
   缺点：无法显示溢出的部分

3. ：after 伪元素法；给父元素添加一个属性值，在style 中给属性值设置清除浮动的属性。
   优点：没有增加标签，结构更简单
   缺点：照顾低版本的浏览器

.clearfix:after{
	content:'';
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix{
    *zoom:1;	为了兼容IE6,7
}

4. 双伪元素清除浮动
   优点：代码更简洁
   缺点：照顾低版本浏览器

.clearfix:after,.clearfix:before{
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
}
.clearfix{
    zoom:1;	为了照顾低版本IE浏览器
}