首页 相关文章 CSS:闭合元素和浮动元素的差别

CSS:闭合元素和浮动元素的差别

提示:本文不是教程,而是对闭合浮动元素的方法在某个特定情况下的现象的讨论,涉及float、clear、overflow、:after等知识,新手勿入。


float属性在页面排版上非常有用,但是也带来很多问题。最常见的就是浮动元素的闭合问题。
如果一个没有设定高度的不浮动元素的子元素浮动,则该元素的高度不会包括浮动子元素的高度,而只会包含其内部不浮动元素的高度,因为浮动元素不属于常规流向,它脱离了文档流。因此如果要元素能够自动包含浮动子元素,则需要闭合浮动元素。
目前比较常用的有3种方法:

利用浮动子元素后的元素清除浮动(包括添加1个空的元素以清除浮动)。 使用:after伪元素,在元素最后插入清除。 为元素设定overflow属性除visible之外的值。


还有1个方法可以使元素自适应高度:

浮动元素,浮动的元素会包含浮动的后代元素。

下列代码,其显示如图1所示。

提示:所列代码只是关键代码,完整代码请查看示例页面。


CSS:

[ 查看全文 ]

2016-02-19 标签:

CSS:闭合元素和浮动元素的差别的相关文章

手机页面
收藏网站 回到头部