H5入门系列8：Float浮动的使用

H5入门系列8：Float浮动的使用

浮动的基础知识

1. 浮动会使元素向左或者向右移动，只能左右，不能上下
2. 浮动元素碰到包含框或者另一个浮动框，浮动停止
3. 浮动元素之后的元素将围绕它，之前的不受影响
4. 浮动元素会脱离标准流
5. 元素浮动后具备了inline-block的特性

CSS 浮动Float的语法

1. Float:left 靠左浮动
2. Float:right 靠右浮动
3. Float:none 不适用浮动

CSS浮动产生的问题

1. 元素使用浮动后会脱离普通流，出现“高度塌陷”
2. 浮动溢出
3. 清除浮动

清楚浮动的方法推荐

1. 使用CSS3的 :after伪元素清楚浮动

.clearfix:after{ content:”.”;
	display: block; height:0;
	visibility: hidden; clear:both;
}
.clearfix { *zoom: 1; /* 触发 hasLayout 兼容IE 6、7*/ }

2. 在父元素添加overflow:hidden来清楚浮动
3. 父级元素定义 height 。只适合高度固定的布局
4. 在浮动元素后使用一个空元素。

<div class="clear"></div>

5. 通常使用前两种方法即可（第二种最简单使用）