06-浮动

1. 浮动（float）

1.1 CSS布局的三种机制

1. 普通流（标准流）：
   • 块级元素会独占一行，从上向下顺序排列；（常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table）
   • 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；（常用元素：span、a、i、em等）
2. 浮动：让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
3. 定位：将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。

1.2 什么是浮动

选择器 { 
	float: 属性值; 
}

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

• float 属性会让盒子漂浮在标准流的上面，脱离标准流，所以第二个标准流的盒子跑到浮动盒子的底下了。
• float属性会改变元素display属性，变成inline-block

特点	说明
浮	加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
漏	加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
特	特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙

1.3 浮动（float）的扩展

（1）浮动元素与父盒子的关系

• 子盒子的浮动参照父盒子对齐
• 不会与父盒子的边框重叠，也不会超过父盒子的内边距

（2）浮动元素与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟盒子是：

• 浮动的，那么当前盒子会与前一个盒子的顶部对齐；
• 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。

2. 清除浮动

2.1 为什么要清除浮动

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。清除浮动后造成的影响

2.2 清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

2.3 清除浮动的方法

选择器{
	clear:属性值;
} 

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

（1）额外标签法(隔墙法)

浮动元素末尾添加空标签

<div style=”clear:both”></div>

（2）父级添加overflow属性方法

overflow: hidden| auto| scroll

auto：y滚动条
scroll：xy滚动条

（3）使用after伪元素清除浮动

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

（4）使用双伪元素清除浮动

.clearfix:before,.clearfix:after { 
	  content:"";
	  display:table; 
}
.clearfix:after {
	 clear:both;
}
.clearfix {
	  *zoom:1;
}