CSS--解决float浮动引起父级边框塌陷的四种方式

祺简

已于 2022-07-12 16:19:07 修改

阅读量996

点赞数

分类专栏： CSS 文章标签： css css3 html

于 2022-02-13 22:00:29 首次发布

本文链接：https://blog.csdn.net/weixin_45406850/article/details/122914764

版权

CSS 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

代码示例

<body>
        <div id="father">
            <div class="layer01"><img src="img/1.jpg" alt=""></div>
            <div class="layer02"><img src="img/2.jpg" alt=""></div>
            <div class="layer03"><img src="img/3.jpg" alt=""></div>
            <div class="layer04">
            </div>
        </div>
</body>

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}
.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px #00F dashed;
    display: inline-block;
    float: left;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
    float: left;
}
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: left;
    clear: both;
}

解决方式

1.给父元素设置高度

 #father{
        border: 1px #000 solid;
        height: 500px;
    }

这种方式是最简单的方式，但是元素固定高度会降低元素的可扩展

2.添加一个空的div

<div class="clear"></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

这种方式简单，但是会造成代码冗余

3.给父级元素添加overflow属性

overflow: hidden; //溢出时，隐藏;边框大小根据内容适应

这种方式简单，但是有些场景下是不可以使用的，比如：有下拉菜单的时候。
扩展：overflow常见值

/*默认值，内容不会被修剪，会呈现在盒子之外*/
overflow:visible
/*内容会被修剪，并且其余内容是不可见的*/
overflow:hidden
/*内容会被修剪，但是浏览器会显示滚动条以便查看其余内容*/
overflow:scroll
/*如果内容被修剪，则浏览器会显示滚动条以便查看其余内容*/
overflow:auto

4.给父级添加伪类after

#father:after{
    content: '';/*添加空内容*/
    display: block;/*把添加的内容转换为块级元素*/
    clear: both;/*清除这个元素两侧的浮动*/
}

写法稍微复杂，但是没有副作用，推荐使用
注意：IE6、IE7下还需要添加一句代码才能清除浮动.clear{zoom:1}。这句代码兼容IE6、IE7浏览器

祺简

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS--解决float浮动引起父级边框塌陷的四种方式

解决float引起的父级边框塌陷
复制链接

扫一扫

专栏目录