overflow及父级边框塌陷问题4种解决方案

最新推荐文章于 2023-04-06 18:49:56 发布

kalimera

最新推荐文章于 2023-04-06 18:49:56 发布

阅读量1.5k

点赞数 1

分类专栏：前端学习文章标签： css3 css html

本文链接：https://blog.csdn.net/kalimera/article/details/122703654

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近在学习前端知识，看了狂神的课，做一点笔记记录知识点

代码准备

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>

    <style>
        /* 设置内外边距 */
        div{
            margin: 10px;
            padding: 5px;
        }
        /* 最外层容器设置边框 */
        #father{
            border: black solid 1px;
        }
        /* 后代选择器，选择father容器后所有div */
        #father div{
            border: rgb(175, 46, 14) solid 1px;
            display: inline-block;
            float: left;
        }

    </style>
</head>
<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">浮动的盒子可以向左右浮动，直到其外边缘碰到包含框or另一个浮动盒子时</div>
    </div>

</body>
</html>

运行结果

解决方法

增加父级元素的高度，最简单最low的方法，不推荐

 /* 最外层容器设置边框
    增加父级元素高度 */
        #father{
            border: black solid 1px;
            height: 600px;
        }

father下增加空div，简单，但代码中需尽量避免空div

<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">浮动的盒子可以向左右浮动，直到其外边缘碰到包含框or另一个浮动盒子时</div>
        <div class="clear"></div>
    </div>

</body>

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

在父级元素中增加overflow:hidden，此时父级元素并没有赋高度，其高度是由内部元素撑起来的，所以其内容并不会真的被修剪隐藏（overflow:auto会出现滚动条，类似overflow:scroll），但一些下拉场景中避免使用

  /* 最外层容器设置边框 */
        #father{
            border: black solid 1px;
            overflow: hidden;
            /* height: 600px; */
        }

推荐方案：在父类添加一个伪类:after，效果相当于在代码中新增空div，但是写在css中，没有副作用

   /* 伪类 */
        #father::after{
            content: '';
            display: block;
            clear: both;
        }

kalimera

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录