浮动（自学笔记）

普通流（normal flow)

css的定位机制有三种：普通流（标准流）、浮动、定位。
html语言中另一个重要的概念-----------标准流，或者叫普通流。普通流就是一个网页内标签元素从上到下，从左到右排列的顺序。比如块级元素会独占一行，行内元素会依次从左到右排列，按照这种大前提的布局排列之下绝对与不会出现例外的情况的叫做普通流布局。

浮动（float）

属性值	描述
left	元素向左浮动
right	元素向右浮动

浮动的注意点

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右动；
浮动找最近的父盒子对齐，但不会贴着边框，不会超过内边距；
一个父盒子里面的子盒子，其中一个子盒子浮动，则其他子盒子都需要浮动
浮动可以让盒子默认转换为行内块

清除浮动方法

1. 额外标签法：在浮动元素的末尾添加一个空的标签，如<div style="clear:both"> </div>
2. 父级添加overflow属性：overflow:hidden/auto/scroll
3. 使用after伪元素清除浮动：

.clearfix:after { /*正常游览器，清除浮动方法*/
	content:" ";
	display:block;
	hight:0;
	clear:both;
	visibility:hidden;
}
.clearfix:{
	*zoom:1;/* ie6清除浮动的方式    * 表示ie7以下识别     */
}

4. 双伪元素清除浮动：

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