防止父级塌陷的方法

第一种方法

方法：
1.增加hight，
2.浮动隐藏,父标签加上 overflow: hidden;
3.

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding:5px;
        }
        #father{
            border: 1px black solid;
            /*增加父级边框，可以防止边框塌陷*/
            height:800px;
        }
        .layer01{
            border: 1px deeppink dashed;
            /*边框环绕图片*/
            display: inline-block;
            /*向左浮动*/
            float: left;
        }
        .layer02{
            border: 1px deepskyblue dashed;
            display: inline-block;
            float: right;
        }
        .layer03{
            border: 1px darkorchid dashed;
            display: inline-block;
            float: right;
        }
        .layer04{
            border:1px #666 dashed;
            font-size: 12px;
            line-height: 23px;
            display: inline-block;
            clear: both;
        }
    </style>

</head>
<body>
<div id="father">
    <div class="layer01"><img src="../image/Snipaste_2022-08-12_16-07-20.png" height="166" width="176"/></div>
    <div class="layer02"><img src="../image/Snipaste_2022-08-12_16-07-51.png" height="159" width="145"/></div>
    <div class="layer03"><img src="../image/Snipaste_2022-08-12_16-10-42.png" height="179" width="164"/></div>
    <div class="layer04">
        啦啦啦啦啦来了啦啦啦啦啦
    </div>

</div>
</body>
</html>

效果图image

第二种方法

隐藏
overflow: hidden;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding:5px;
        }
        #father{
            border:1px #000 solid;
            overflow: hidden;
        }
        .layer01{
            border: 1px deeppink dashed;
            /*边框环绕图片*/
            display: inline-block;
            /*向左浮动*/
            float: left;
        }
        .layer02{
            border: 1px deepskyblue dashed;
            display: inline-block;
            float: right;
        }
        .layer03{
            border: 1px darkorchid dashed;
            display: inline-block;
            float: right;
        }
        .layer04{
            border:1px #666 dashed;
            font-size: 12px;
            line-height: 23px;
            display: inline-block;
            float: right;
        }

    </style>

</head>
<body>
<div id="father">
    <div class="layer01"><img src="../image/Snipaste_2022-08-12_16-07-20.png" height="166" width="176"/></div>
    <div class="layer02"><img src="../image/Snipaste_2022-08-12_16-07-51.png" height="159" width="145"/></div>
    <div class="layer03"><img src="../image/Snipaste_2022-08-12_16-10-42.png" height="179" width="164"/></div>
    <div class="layer04">
        啦啦啦啦啦来了啦啦啦啦啦
    </div>

</div>
</body>
</html>

image

第三种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding:5px;
        }
        #father{
            border:1px #000 solid;

        }
        .layer01{
            border: 1px deeppink dashed;
            /*边框环绕图片*/
            display: inline-block;
            /*向左浮动*/
            float: left;
        }
        .layer02{
            border: 1px deepskyblue dashed;
            display: inline-block;
            float: right;
        }
        .layer03{
            border: 1px darkorchid dashed;
            display: inline-block;
            float: right;
        }
        .layer04{
            border:1px #666 dashed;
            font-size: 12px;
            line-height: 23px;
            display: inline-block;
            float: right;
        }

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

    </style>

</head>
<body>
<div id="father">
    <div class="layer01"><img src="../image/Snipaste_2022-08-12_16-07-20.png" height="166" width="176"/></div>
    <div class="layer02"><img src="../image/Snipaste_2022-08-12_16-07-51.png" height="159" width="145"/></div>
    <div class="layer03"><img src="../image/Snipaste_2022-08-12_16-10-42.png" height="179" width="164"/></div>
    <div class="layer04">
        啦啦啦啦啦来了啦啦啦啦啦
    </div>
    <div class="clear"></div>

</div>

</body>
</html>

image

posted @ 2022-08-12 16:58  笑到肚子疼  阅读(38)  评论(0)    收藏  举报