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元素的宽度.
以下是一个例子.
#layout_header{ height:50px; background-color:#3C6; } #layout_body{ background-color:#09F; } #layout_footer{ background-color:#F8F05A; height:20px; } .body-left{ float:left; } .clr{ clear:both; } #body_header{ background-color:#CF0; border:solid 2px . . . → Read More: css之float略解
English
最新评论