CSS之float浮动

首先了解 标准流：标准流也叫普通流或文档流，没设置浮动时的布局是标准流，从左到右从上到下。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

浮动可以把多个块级元素放在一行显示。

特点

• 脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标
• 浮动的盒子不再保留原先的位置（漂浮/高于标准流之上 标准流会被覆盖在下面）

特性

• 浮动的元素是互相贴靠在一起的（没有缝隙），如果父级宽度装不下这些浮动盒子，多出的盒子会另起一行对齐。

• 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动后具有行内块元素的特点，所以行内元素设置了浮动则不需要转换块级、行内块元素，就可以直接设置宽高。

浮动的盒子只会影响后面的标准流，不影响前面的标准流：

所以在同一个盒子里的，一个设置浮动就全部都设置浮动（一浮全浮），不然排列会混乱

清除浮动

为了让浮动的盒子能自由撑开父盒子的高度（不写死父盒子高度），父盒子是不设置高度的，但是这样会出现一个问题，因为父盒子没有高度，导致父盒子下面的标准流盒子都会上去，到父盒子下面补充父盒子位置，导致原本浮动的子盒子元素压在下面标准流盒子之上，影响了下面的标准流盒子的显示。以下为四个解决方法。

方法一

额外标签法（隔墙法 W3C推荐的做法） 在这些浮动的子盒子最后面添加一个空标签(必须是块元素) 如：

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

方法二

父级添加 overflow 属性：overflow: hidden 或 auto 或 scroll 。缺点：无法显示左右溢出部分！

方法三

父级添加after伪元素：隔墙法升级版

css中写好：

.clearfix:after{
	clear: both;
	display: block;
	content: "";
	height: 0;
	visibility:hidden;
}
.clearfix{
    *zoom: 1;
}

然后给父元素标签 的class添加clearfix

方法四

父级添加双伪元素：

css中写好：

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

然后给父元素标签 的class添加clearfix