016解决父级元素塌陷的问题（代码）

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>解决父级元素塌陷的问题</title>
        <link rel="stylesheet" href="../css/020.css">
    </head>
    <body>
        <div id="father">
            <div class="layer01"><img src="../../image/1.jpg" alt=""></div>
            <div class="layer02"><img src="../../image/1.jpg" alt=""></div>
            <div class="layer03"><img src="../../image/1.jpg" alt=""></div>
            <div class="layer04"><span>浮动可以向左也可以向右</span></div>
            <!-- <div class="clear"></div> -->
        </div>
        
    </body>
</html>
div {
    margin: 10px;
    padding: 5px;
}

#father {
    border: 1px #000 solid;
    /* height:500px; 1、增加父级元素的高度~*/
    /* overflow: hidden; */
}
#father::after{
    content: '';
    display: block;
    clear: both;
}

.layer01 {
    border: 1px #F000 dashed;
    display: inline-block;
    float: left;
}

.layer02 {
    border: 1px #000F dashed;
    display: inline-block;
    float: left;
}

.layer03 {
    border: 1px dashed #060;
    display: inline-block;
    float: left;
}
/*
clear: right; 右侧不允许有浮动的元素
clear: left;  左侧不允许有浮动的元素
clear: both;  两侧不允许有浮动的元素
clear: none;
*/
.layer04 {
    border: 1px dashed #666;
    font-size: 12px;
    line-height: 23px;
    /*设置以百分比计的行高：*/
    display: inline-block;
    float: left;
    clear: both;/*清除浮动，让元素既有浮动的效果又有块元素的效果 */
}
/* .clear{
    clear: both;
    margin: 0;
    padding: 0;
}
2、增加一个空的div标签，清除浮动
 */


/*父级边框塌陷问题
1、增加父级元素的高度~
2、增加一个空的div标签，清除浮动
3、overflow

*/

 

运行结果：

 

 

posted @ 2021-08-14 12:22  李林林  阅读(45)  评论(0)  编辑  收藏  举报