解决因浮动带来的影响

一、浮动会带来的影响有什么？

先看一段代码，如下图所示，一个wrap内有两个div，分别为一个box和一个mess，根据块级元素的定义，他们每个都会单独占一行的空间。

<style>
        .wrap {
            width: 200px;
            border: 1px solid black;
        }

        .box {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }

        .mess {
            width: 50px;
            height: 50px;
            background-color: yellow;
            text-align: center;
            line-height: 100px;
        }
</style>

<div class="wrap">
        <div class="box"></div>
</div>
<div class="mess"></div>

当我们给大的div加上向左浮动之后，会发生什么呢？

<style>
        .wrap {
            width: 200px;
            border: 1px solid black;
        }

        .box {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            float: left;
        }

        .mess {
            width: 50px;
            height: 50px;
            background-color: yellow;
            text-align: center;
            line-height: 100px;
        }
</style>

<div class="wrap">
        <div class="box"></div>
</div>
<div class="mess"></div>

可以看到出现了两个问题，

1. 本来在box下面的mess跑到了box的里面
2. wrap的高度变为0了

二、为什么会出现上面的问题?

因为当我们给box加上浮动之后,这个box就脱离了文档流，换句话说，可以理解为box断绝父子关系了，此时wrap 没有儿子了，所以没有元素去撑开 wrap 的高度，自然高度就变为 0 了。而因为 box 脱离了文档流，mess 自然在文档流内向前了一步，跑到上面去了。

三、如何解决浮动带来的影响?

1. BFC 块级格式化上下文

第一种方法我们可以把父级元素wrap变为 BFC 元素。[BFC 可以简单理解为：BFC 元素里面的元素无论如何布局，都不会影响外部的元素的布局，在这一题里面就是wrap元素里面的元素设置了浮动，但是不会影响外部wrap元素的布局]

<style>
        .wrap {
            width: 200px;
            border: 1px solid black;
            overflow: hidden;
        }

        .box {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            float: left;
        }

        .mess {
            width: 50px;
            height: 50px;
            background-color: yellow;
            text-align: center;
            line-height: 100px;
        }
</style>

<div class="wrap">
        <div class="box"></div>
</div>
<div class="mess"></div>

如上图所示，给父级元素 wrap 加上属性 overflow:hidden; 之后，触发了父容器的 BFC ，达到了清除浮动的效果。

2. clean 属性

通过添加 clean:left|right|both; 属性，也可以起到清除浮动影响的效果。

• 在浮动元素后新增一个div，并添加 clean 属性，以达到清除浮动的效果。

<style>
        .wrap {
            width: 200px;
            border: 1px solid black
        }

        .wrap::after {
            content: "";
            display: block;
            clear: left;
        }

        .box {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            float: left;
        }

        .mess {
            width: 50px;
            height: 50px;
            background-color: yellow;
        }
</style>

<div class="wrap">
        <div class="box"></div>
        <div style="clear: left;"></div>
</div>
<div class="mess"></div>

3. 伪元素

给父级元素加上伪元素 after 后，通过控制台可以看到新增了一个子元素，不难想到，也可以给 after 伪元素添加 clear 属性，以达到清除浮动影响的效果。

<style>
        .wrap {
            width: 200px;
            border: 1px solid black
        }

        .wrap::after {
            content: "";
            display: block;
            clear: left;
        }

        .box {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            float: left;
        }

        .mess {
            width: 50px;
            height: 50px;
            background-color: yellow;
        }
</style>

<div class="wrap">
        <div class="box" style="float: left"></div>
    </div>
<div class="mess"></div>