清楚浮动的子元素

在利用浮动进行布局时，不免会遇到一些问题。例如，当一个元素的所有子元素都浮动时，该元素的高度会变为零，这将破坏整体布局或导致该元素的背景不能正常显示。

该问题的解决方法有很多，但最常见的方法有三种，这里将一一说明。在讨论这三种方法时，将以一个双栏布局为例，使用的HTML代码结构如下所示。

<div id="main">
    <div id="content"></div>
    <div id="sidebar"></div>
</div>

从HTML结构上看，#content和#sidebar分别代表着内容栏与侧边栏。为说明问题，这里将使用浮动创建双栏布局，其样式规则如下所示。

#main {
    width: 950px;
    background-color: red;
}
#content {
    width: 600px;
    float: left;
}
#sidebar {
    width: 350px;
    float: left;
}

在这段样式规则中，值得注意的是#main的背景色被设置成红色。但由于#content和#sidebar被设置为浮动，#main的红色背景将无法正常显示。刚刚提到到，对于这种情况，有三种解决方法，现在将分别进行探讨。

第一种方法是以毒攻毒，即使用浮动（将父元素#main设置为浮动）来解决该问题，其样式规则如下所示。

#main {
    width: 950px;
    background-color: red;
    float: left;
}

通过浮动#mian使得问题得到很好的解决，但该方法同时隐藏着一个问题，就是又新增一个浮动元素，这意味着有可能不得不去处理另一个浮动元素。

第二种方法是在#mian中新增一个非浮动元素，并将其放置在#main的末尾，HTML代码如下所示。

<div id="main">
    <div id="content"></div>
    <div id="sidebar"></div>
    <div style="clear: both;"></div>
</div>

通过向#main中添加一个非浮动块级元素，并将其style属性值设置为clear: both;，问题得到解决。该方法没有副作用，唯一不足的是增加一行没有实际意义的代码。

第三种方法衍生自第二种方法，同样是在#main末尾新增一个非浮动元素，但不是修改HTML代码，而是使用样式规则生成新增的非浮动元素。该方法需要结合使用:after伪元素与content属性，其样式规则如下所示。

.clear-fix:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}
.clear-fix {
    +height: 1%;
}

该方法被称为简易清除工具，使用时只需将#main的class属性值设置为clear-fix即可，其HTML代码如下所示。

<div id="main" class="clear-fix">
    <div id="content"></div>
    <div id="sidebar"></div>
</div>

转载于:https://www.cnblogs.com/newgate/archive/2013/03/10/float-clear.html