CSS 清除浮动

一、CSS浮动 (float)

属性	作用
left	让元素脱离标准流，同一级的元素左浮动并排显示
right	让元素脱离标准流，同一级的元素右浮动并排显示

浮动特点

• 浮动的元素脱离了标准流的限制，具有了块级元素和行内元素的性质，可以设置高度，还能并排一行，而且不会有空白折叠现象。
• 浮动的元素依次贴边
• 浮动的元素没有margin塌陷
• 浮动的元素，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素。（在IE6、7浏览器中，有兼容问题）
• 字围现象 （同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字。文字内容不会被盖住，会围绕浮动的元素进行加载。）

上篇有介绍标准文档流

二、 浮动导致的问题

1. 在标准流中，不设置高度，内部的标准流元素会自动撑高。但是如果内部的子元素进行了浮动，浮动的子元素是不能撑高标准流父元素。
2. 父元素没有高度，会影响后面元素的标准流位置。

三、解决方法

1. 给标准流父元素强制设置一个合适的高度。（一旦子元素高度变化，问题还会出现）
2. 给标准流父元素添加clear属性【clear属性：清除标签元素自身受到的前面的浮动元素的影响。】（父元素高度还是不能自适应）
3. 外墙法：在两个大的父元素之间，添加一个空的 div 标签，标签上带有clear：both 样式。（能解决浮动影响后面元素标准流位置和贴边，但是还是不能让父元素高度自适应）
4. **内墙法：**在父元素内部所有的浮动子元素后面添加一个空的 div 标签，标签高度为0，添加clear属性。（最后能解决父元素高度自适应，但是浮动是css样式属性带来的问题，内墙法使用HTML结构去辅助解决问题，违背了HTML的语义化文本。）
5. 给选中父盒子的选择器后面添加伪类，类似利用css代码在父元素内写一堵内墙。

/*伪类*/
.clearfix:after {
	content : "1";
	display : block;
	height : 0;/*将盒子高度固定为0，避免影响父元素的高度*/
	clear : both;/*清除前面浮动的影响*/
	visibility : hidden;/*将创建的元素占位置隐藏*/
}

6. 给内部有浮动子元素的父元素添加溢出隐藏overflow:hidden（一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。）

总结：父元素高度固定，直接使用height属性；高度不固定，使用overflow属性解决浮动问题。