css之float略解

css布局中常用的float样式，给我们带来非常丰富的布局，同时也给不熟悉它的人带来了许多浏览器兼容的麻烦。我这里根据自己的一些经验做些总结，希望对遇到问题的人有所帮助。

1.浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。普通的块级元素处在浮动元素下层，但它内部的文字（以及行内元素）会环绕浮动元素。

所以使用时某个父节点如div中两个float:left的子元素，如果这个div没有定义一个限定高度，那么子float元素不对自动撑开父div，除非在换行出强制加了“clear:both”的 div来结束float流,重新将页面布局倒入下一行.由于要加入一个空div,<div style=”clear:both”></div> 觉得语义不好,可以有一个折中的解决方案.

• .clearfix:after {
•     content: “.”;
•     display: block;
•     height: 0;
•     clear: both;
•     visibility: hidden;
• }/*css 伪类*/
• * html .clearfix {height: 1%;}/*IE hack*/

这样在调用float的父节点div可以添加clearfix类来自动完成clear避免了添加无意义的空div.

2. 浮动出现时,还有一种方法,可以不必非得添加过多的clear DIV来达到float 的布局效果.可以定义父节点Div的高度,来调节一下,以及相应的float元素的宽度.

以下是一个例子.