CSS围住浮动元素的三种方法

　　浮动元素脱离了文档流，其父元素看不到它了，因而不会包围它。浮动会“扩散”到下一个清除浮动的元素处。这会引起不想要的页面布局效果。

　　清除浮动的方法有三种：

　　　　1、父元素overflow:hidden

　　　　2、同时浮动父元素

　　　　3、添加清除浮动元素。

　　1、父元素overflow:hidden

　　　　overflow:hidden的真正作用是防止元素被超大内容撑大。使用hidden后，元素保持其设定的高宽，超大的内容会被“剪切”掉，变为页面不可见部分。同时，overflow:hidden也能强迫父元素包围浮动子元素。

　　2、同时浮动父元素

　　　　浮动父元素后，父元素会紧紧包裹子元素（不管子元素是否浮动），这时父元素的高宽极有可能需要强制确定。由于父元素的浮动会导致父元素的后续元素也浮动，故需要在父元素的后续元素上清除浮动。

　　3、添加清除浮动元素。

　　　　由于包含元素一定会包围非浮动的子元素,而且清除会让这个子元素位于(清除一侧)浮动元素的下方,因此包含元素一定会包含这个子元素——以及前面的浮动元素。——《CSS设计指南》

　　　　父元素需要将非浮动元素包围起来，因此将非浮动元素做最后一个元素，同时父元素肯定将子元素包围起来。直接添加一个空白div清除浮动即可。

　　　　不需要额外元素的写法：

 .clearfix:after {

 content:".";

 display:block;

 height:;

 visibility:hidden;

 clear:both;

 }

　　　　这三种方法的使用要因地制宜。比如,不能在下拉菜单的顶级元素上应用overflow:hidden ,否则作为其子元素的下拉菜单就不会显示了。因为下拉菜单会显示在其父元素区域的外部,而这恰恰是 overflow:hidden 所要阻止的。再比如,不能对已经靠自动外边距居中的元素使用“浮动父元素”技术,否则它就不会再居中,而是根据浮动值浮动到左边或右边了。

巴特西

CSS围住浮动元素的三种方法

最新文章

热门文章