CSS 清除浮动

最新推荐文章于 2024-07-21 22:38:03 发布

棉安咚

最新推荐文章于 2024-07-21 22:38:03 发布

阅读量364

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_37814566/article/details/89467934

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<style type="text/css">
    .box1{
        width: 200px;
        border: 2px solid #0f0;
    }
    .box1 .child-1{
        height: 100px;
        width: 100px;
        background: #fd0;
    }
    .box1 .child-2{
        height: 100px;
        width: 100px;
        background: #fba;
    }
    .box2{
        width: 200px;
        height: 150px;
        border: 2px solid #00f;
    }
</style>
<body>
    <div class="box1">
        <div class="child-1">child-1</div>
        <div class="child-2">child-2</div>
    </div>
    <div class="box2"></div>
</body>

当我们没有设置块级元素(box1)的高度时，其高度是有里面的子控件(child-1 child-2)撑起来的。
如果让里面的子控件浮动起来(float:left)，就脱离了正常的文档流，那么父块级元素(box1)的高度就会变成0，
就会出现我们所说的高度塌陷问题。
由于父块级元素的高度变为0，一定会对下面的其他元素(box2)造成影响。
那么如何解决高度塌陷问题呢？

其一：通过在浮动元素的末尾添加一个空元素，设置 clear：both属性；
缺点：成本太高，额外添加了一个元素，维护困难

<div class="box1">
<div class="child-1">child-1</div>
<div class="child-2">child-2</div>
<div style="clear: both;"></div>
</div>
<div class="box2"></div>

其二：通过设置父元素 overflow 或者display：table 属性来闭合浮动，给box1添加overflow：hidden

<div class="box1" style="overflow:hidden">
<div class="child-1">child-1</div>
<div class="child-2">child-2</div>
</div>
<div class="box2"></div>

其三（推荐）：使用伪元素：after,下面是代码，给box1添加上class=clearfloat，代码如下

.clearfloat:after{
display:block;
height:0;
content:"";
clear:both;
visibility:hidden;
}

此种方式其实是第一种方式的简单写法。

棉安咚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 清除浮动

<style type="text/css"> .box1{ width: 200px; border: 2px solid #0f0; } .box1 .child-1{ height: 100px; width: 100px; background: #fd0; } ...
复制链接

扫一扫

专栏目录