为什么要清除浮动？

1 先看有浮动会是什么样子：

当一个内层元素是浮动的时候，如果没有关闭浮动时，其父元素也就不会再包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。也就是为什么父元素不能被撑开了！

没有给最外层的DIV.outer设置高度，但是我们知道如果它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。但是当内层元素浮动后，就出现了以下影响：

（1）：背景不能显示 （2）：边框不能撑开 （3）：margin 设置值不能正确显示

参考：来自

认识浮动

使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

知道浮动和为什么要清除浮动之后我们可以开始学习如何清除浮动了，这时候我们就需要用到清除浮动的属性clear,

  1. /* 元素的某个方向上不能有浮动元素 */
  2. clear:left | right | both | none | inherit；
clear:both;  /* 元素的左右两侧均不允许浮动元素 */

清除浮动的方法

注意：用于清除浮动的元素一定要放在父元素的最后一个子元素，也就是所有浮动元素的右边，否则父元素还是没有包裹住浮动元素

1 万能清除浮动方法（添加after伪元素）

<style>
.container {
        border: 1px solid red;
    }
.item {
    float: right;
}
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}
.clearfix{
    zoom: 1;     /* IE 兼容 */
}
</style>

<div class="container clearfix">
    <div class="item">
        我是浮动元素1
    </div>
    <div class="item">
        我是浮动元素2
    </div>
</div>

2 还是clear清除浮动，将用于清除浮动的元素放在最后一个子元素位置上，设置clear:both

<style>
    .container {
        border: 1px solid red;
        background: chocolate;
        padding: 10px;
        margin: 20px;
    }
    .itemLeft {
        float: left;
    }
    .itemRight {
        float: right;
    }
    .clearfix {
        clear: both/left;
    }
</style>

<div class="container">
    <div class="itemLeft">
        左浮元素1
    </div>
    <div class="itemLeft">
        左浮元素2
    </div>
    <div class="itemRight">
        右浮元素1
    </div>
    <div class="itemRight">
        右浮元素2
    </div>
    <div class="clearfix"></div> // 放在最后
</div>

3 在父元素上设置overflow: hidden/auto;也能清除浮动，这是创建了BFC，父元素包裹住了浮动元素。但hidden对搜索引擎优化seo不友好。

<style>
    .container {
        border: 1px solid red;
        background: chocolate;
        padding: 10px;
        margin: 20px;
        overflow: auto/hidden;
    }
    .itemLeft {
        float: left;
    }
    .itemRight {
        float: right;
    }
</style>

<div class="container">
    <div class="itemLeft">
        左浮元素1
    </div>
    <div class="itemLeft">
        左浮元素2
    </div>
    <div class="itemRight">
        右浮元素1
    </div>
    <div class="itemRight">
        右浮元素2
    </div>
</div>

其他有副作用，就不一一列举了

部分参考来自