其他分享
首页 > 其他分享> > clear:both可以清除浮动的原理

clear:both可以清除浮动的原理

作者:互联网

父盒子没有设置高度,里面的子盒子box1由于浮动导致脱离父盒子从而无法再撑开父盒子的高度,父盒子高度因此塌陷,最终导致父盒子上下边框贴在一起。

<style>
.fabox {
        border: 10px solid red;
        margin-top: 20px;
    }

    .sonbox1 {
        width: 200px;
        height: 200px;
        background-color: pink;
        float: left;
    }

    .sonbox2 {
        background-color: green;
    }
</style>

 <div class="fabox">
        <div class="sonbox1"></div>
        <div class="sonbox2"></div>
</div>

效果图如下:

此时如果在父盒子内部再加上一个盒子box2,只要给这个box2盒子clear:both属性,父盒子会被撑开,撑开原理可以理解为因为box2给了clear:both属性后相当于自动加了一个box2到父盒子的外边距(黄色箭头所示)

<style>
.fabox {
        border: 10px solid red;
        margin-top: 20px;
    }

    .sonbox1 {
        width: 200px;
        height: 200px;
        background-color: pink;
        float: left;
    }

    .sonbox2 {
        clear: both;
        background-color: green;
    }
</style>

    <div class="fabox">
        <div class="sonbox1"></div>
        <div class="sonbox2">Aaaaaa</div>
    </div>
  这个时候的  .sonbox2 {         clear: both;         background-color: green;     } 实际上和  .sonbox2 {         margin-top: 200px;         background-color: green;     } 效果差不多,只不过margin-top需要给固定高度不利于内容显示,而clear:both是自动给高度。

注意上面为了演示所以给box2加上了内容Aaaa,实际运行去掉内容,页面就不会显示box2了。
但此时的box2实际上作用仅仅只是为了清除父盒子的浮动影响,副作用就是多出1个div结构,不利于后期维护,此时我们可以采用伪元素里实现这个目标,在css里添加如下代码:

 .fabox::after {
        content: '';
        display: block;
        clear: both;
    }

效果图:

可以看到在父盒子后面添加伪元素后,父盒子高度已经被撑开了。

在父盒子后面添加伪元素后实际相当于在父盒子里新增了1个类似box2的盒子,所以效果和在box2设置vlear:both一样,但用伪元素不会在页面显示新增的元素。

我们给这个伪元素添加内容就能对比出效果了

  .fabox::after {
        content: '我是父盒子元素后面新增的伪元素,背景颜色绿色,效果和box2一样';
        display: block;
        clear: both;
        background-color: green;
    }

标签:浮动,both,盒子,color,clear,background,box2
来源: https://www.cnblogs.com/JeffreyZhu/p/15261955.html