清除浮动

最新推荐文章于 2025-06-02 17:01:47 发布

原创最新推荐文章于 2025-06-02 17:01:47 发布 · 269 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#清除浮动

日常应用专栏收录该内容

7 篇文章

订阅专栏

清除浮动的方法
假设现在有个div里面包含着三个div块

</style>
    .div1{
    border: 3px solid yellow;
    }
    .div4{
    float: left;
    width: 200px;
    height: 200px;
    background: #f00;
    }
    .div2{
    float: left;
    width: 200px;
    height: 200px;
    background: #0f0;
    }
    .div3{
    float: left;
    width: 200px;
    height: 200px;
    background: #00f;
    }
</style>
<body>
<div class="div1">
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
</div>
</body>

这样显示出来的效果会是这样的图片最上面的那条黄线显示的就是最外层的div
那么不应该是外层div包含这三个小方框么，很明显没有达到我们想要的结果，现在体现清除浮动的重要性了，如果我们在外层div加上一句overflow：hidden那么就会到达我们想要的结果，效果如下图：
这里写图片描述
这样就达到了我们的目的了，此外还有另外两种方法可以清除浮动，第二种是使用after伪对象清除浮动
.div1:after{ clear: both; display: block; content: ''; }
第三种清除浮动的方法是在内层div最后面再加上一个div，然后对这个div设置clear：both即可
清除浮动某方面目的是使它变成BFC
通常我们的最外层div不会去设置高度，而是用内部的元素来撑起它的高度，但是div的高度不会包括内部的浮动元素的高度，那么我们为了达到这个目的就是它变成BFC，因为BFC它会包含内部的浮动元素，所以内部div的高度就会撑起它外层的div高度，从而达到我们的目的