css清除浮动

前端开发中浮动处处可见，本文探讨浮动的成因以及如何更加有效的清除浮动。

1、浮动与清除浮动

浮动溢出
    当容器的高度为auto，且容器中的内容有浮动（float为left或right）的元素，在这种情况下，容器的高度不会自动改变以包含浮动部分的高度，使得浮动内容溢出到容器外面而影响（甚至破坏）布局的现象。 这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
“理想状态” - 合理的清除浮动后

2、清除浮动

基本css样式

.box {
    width: 400px;
    border: 1px solid #ff721b;
}
[class*='pull-'] {
    width: 100px;
    height: 100px;
    background-color: #00A8FF;
}
.pull-left {
    float: left;
}
.pull-right {
    float: right;
}

2.1 在容器内部使用块级元素的clear: both清除浮动

（1）通过在浮动元素后的块级元素设置clear: both;来清除其之前的浮动。

css样式：

.clearfix2 {
    clear: both;
}

---

示例1：

<div class="box">
    <div class="pull-left"></div>
    <p class="clearfix2"></p>
    <div class="pull-right"></div>
    <p class="clearfix2"></p>
</div>

---

示例2：

<div class="box">
    <div class="pull-left"></div>
    <div class="pull-right"></div>
    <p class="clearfix2"></p>
</div

注：如果通过在容器内部添加新元素（块级元素且设置clear:both;），最好在容器结束标签前添加该元素才能达到理想状态。
（2）通过设置容器伪元素（::after）为块级元素且clear: both;来清除浮动 。----【用这个方式较好 ，不用考虑太多其它影响因素。】
示例：

.clearfix4::after {
    display: block; /*table、flex也可以*/
    height: 0; /*可不写*/
    visibility: hidden; /*可不写*/
    content: '';
    clear: both;
}

<div class="box clearfix4">
    <div class="pull-left"></div>
    <div class="pull-right"></div>
</div>

---

2.2 利用BFC特性

BFC（Block Formatting Context），块级格式化上下文，它规定了内部的块级元素的布局方式，默认情况下只有根元素（即body）一个块级上下文。

1. BFC布局规则

• 内部的块级元素会在垂直方向，一个接一个地放置；
• 块级元素垂直方向的距离由margin决定（margin合并）；
• 每个元素的margin box的左边，与包含border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此；
• BFC的区域不会与float box重叠；
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素；*
• 计算BFC的高度时，浮动元素也参与计算。

2. 创建一个BFC

• float的值不为none；
• overflow的值不为visible；
• position的值为fixed / absolute；
• display的值为table-cell / table-caption / inline-block / flex / inline-flex。
  只需满足以上条件之一，一个BFC就可以被显式触发。

---

示例：以设置overflow：auto;为例（其它属性设置后会有一些影响-脱离文档流）

.clearfix1 {
    overflow: auto; /*hidden也可以*/
}

<div class="box clearfix1">
    <div class="pull-left"></div>
    <div class="pull-right"></div>
</div>

---

2.3 让容器也浮动

让容器一起浮动，也能不受内部元素的浮动影响。这个方法要小心使用。

3、参考文章

• 为什么"overflow:hidden"能清除浮动的影响；