DIV+CSS 清除浮动常用方法总结

那么我们来详细讲解一下 "DIV+CSS 清除浮动常用方法总结"。

什么是浮动

HTML元素默认是静态的，也就是说当你不做任何改变时，元素会按照默认顺序一个一个排列。而浮动可以将元素移动到其它的位置，比如把图片和文字和并排显示。浮动元素会先尽可能左右摆放，在左右摆放完后，下一个元素则会紧随其后放置。

为什么需要清除浮动

浮动虽然提供了很多方便，但也会给后面的布局留下隐患，称之为“浮动造成的布局问题”，清除浮动是为了解决浮动产生的一些问题。比如：父级高度无法被撑起来，与浮动元素重叠等。

以下是常见的清除浮动方法：

1. 空标签清除法（常用）

HTML结构：

<div class="parent">
    <div class="floatleft">儿子1</div>
    <div class="floatleft">儿子2</div>
    <div class="clear"></div>
</div>

CSS代码：

.parent .floatleft{
    float:left;
}
.clear{
    clear:both;
}

在父元素内部，继续添加一个空标签，样式设为 clear:both; 即可清除子元素浮动。这个方法是最常见的清除浮动方法，也是最推荐使用的一种。只是多添加了一个语义不符的标签，不过可以在CSS中用 content 属性弥补其不足。

2. overflow清除法

HTML结构：

<div class="parent">
    <div class="floatleft">儿子1</div>
    <div class="floatleft">儿子2</div>
</div>

CSS代码：

.parent {
    overflow:hidden;
}
.parent .floatleft{
    float:left;
}

给父级元素加上 overflow:hidden; 或者 overflow:auto; 即可清除子元素浮动。原理：添加 overflow 会使父级元素生成 BFC ，BFC 区域不会与浮动元素重叠。

3. 父元素定义高度（不推荐）

HTML结构：

<div class="parent">
    <div class="floatleft">儿子1</div>
    <div class="floatleft">儿子2</div>
</div>

CSS代码：

.parent {
    height: 600px; /* 高度需要自己计算 */
}
.parent .floatleft{
    float:left;
}

给父级元素添加特定高度，可以解决当子元素浮动时无法撑开父元素的问题。不过如果子元素高度超出父元素，会造成内容溢出。

---

以上就是常用的三种清除浮动的方法，一般使用空标签清除法比较多。当然，也可以选择使用 clearfix 类进行清除浮动，这个类还是比较方便的，比如在 bootstrap 中常用。

示例：

HTML结构：

<div class="parent clearfix">
    <div class="floatleft">儿子1</div>
    <div class="floatleft">儿子2</div>
</div>

CSS代码：

.parent .floatleft{
    float:left;
}
.clearfix:before,
.clearfix:after{
    display:table;
    content:"";
    clear:both;
}
.clearfix{
    *zoom:1;
}

以上就是DIV+CSS清除浮动常用方法总结。

希望能对你有所帮助。