会员投稿
投稿指南
提示：本文不是教程，而是对闭合浮动元素的方法在某个特定情况下的现象的讨论，涉及float、clear、overflow、:after等知识，新手勿入。
float属性在页面排版上非常有用，但是也带来很多问题。最常见的就是浮动元素的闭合问题。
如果一个没有设定高度的不浮动元素的子元素浮动，则该元素的高度不会包括浮动子元素的高度，而只会包含其内部不浮动元素的高度，因为浮动元素不属于常规流向，它脱离了文档流。因此如果要元素能够自动包含浮动子元素，则需要闭合浮动元素。
目前比较常用的有3种方法：
- 利用浮动子元素后的元素清除浮动（包括添加1个空的元素以清除浮动）。
- 使用:after伪元素，在元素最后插入清除。
- 为元素设定overflow属性除“visible”之外的值。
还有1个方法可以使元素自适应高度：
- 浮动元素，浮动的元素会包含浮动的后代元素。
下列代码，其显示如图1所示。
提示：所列代码只是关键代码，完整代码请查看示例页面。
CSS：
p,
div
{...}
{
margin
:
5px
;
}
.wrap
{...}
{
width
:
440px
;
margin
:
10px
;
clear
:
both
;
}
.div1,
.div2p
{...}
{
float
:
left
;
width
:
80px
;
margin
:
8px
;
+display
:
inline
;
}
XHTML：
<
div
class
="wrap"
>
<
div
class
="div1"
>
div1，浮动
div
>
<
div
class
="div2"
>
<
p
class
="div2p"
>
div2内p1
p
>
<
p
class
="div2p"
>
div2内p2
p
>
<
p
class
="div2p3"
>
div2内p3，不浮动
p
>
div
>
<
div
class
="div3"
>
div3，不浮动
div
>
div
>
提示：截图是Firefox 2.0（以下简称FF）中的效果，如无特殊声明，则表示在Windows IE7.0（以下简称IE）、Opera 9.2（以下简称Op）、Safari 3.0（以下简称Sa）中效果相同。
图1：浮动元素与子元素浮动的元素
如果对.div2p增加CSS：
.div2p
{...}
{
......clear
:
left
;
}图2：不浮动的元素内的浮动子元素设定“clear:left”后的效果
