CSS-清除浮动

父元素因为子级元素浮动而引起的内部高度为0。
我们没有给父元素设置高度

<div class="par">
        <div class="child1">浮动一</div>
        <div class="child2">浮动二</div>
    </div>
    <div class="btm">下面的盒子</div>

当我们此时给浮动一和浮动二加上浮动之后

方法一：给父元素设置overflow：hidden

.par {
            /* 方法一 */
            overflow: hidden;
            width: 300px;
            border: 1px solid red;
        }

原理：通过触发BFC来清除浮动
缺点：当内容增多的时候容易造成不会自动换行导致内容被隐藏掉

方法二：给父元素display：inline-block

.par {
            /* 方法一 */
            /* overflow: hidden; */
            /* 方法二 */
            display: inline-block;
            width: 300px;
            border: 1px solid red;
        }

方法三：在最后浮动元素后面额外加一个

在ie6-7不支持伪元素，使用*zoom：1；

    <div class="par">
        <div class="child1">浮动一</div>
        <div class="child2">浮动二</div>
        <div class="clear"></div>
    </div>
    <div class="btm">下面的盒子</div>

        .clear {
            clear: both;
        }

方法四：使用after伪元素

    <div class="par clear">
        <div class="child1">浮动一</div>
        <div class="child2">浮动二</div>
    </div>
    <div class="btm">下面的盒子</div>

        /* 方法四,推荐使用的 */
        .clear:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }