css清除浮动(css 解决浮动元素引起的高度问题)

首先了解两个概念：

1. 文档流：文档流是文档中可显示对象在排列时所占用的位置。
2. 浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

浮动的实际用途，可设置文字环绕或使元素宽度由内容填充（类似Inline-block)。使用浮动需要注意的是如果浮动的元素高度比父级容器还高，那么需要设置父级容器的overflow属性为auto,使其自动撑满。

 

本人经常使用的清除浮动是使用以下这种（目前主流，可以把该样式封装在全局，供一整个项目复用）
 

选择符:after{ 
content:""; 
clear:both; 
display:block;
}

也有写法把content设置为不为空，此时要设置  visibility:hidden;/*将元素隐藏*/

以上方法，未考虑ie6-7这老掉渣的版本（IE6，7下不兼容 after伪类），兼容方法添加如下样式

选择符{zoom:1;}

zoom:1; //     触发 IE下 haslayout，使元素根据自身内容计算宽高

 

其他一些方法罗列（不齐全）

1、给父容器一个确定的高度
2、手动添加一个空div，并设置样式{clear:both;}的

3、父元素增加样式overflow:auto;