清除浮动

清除浮动

  • 高度坍塌

当没有指定高度的父元素中的子元素全部都浮动时，父元素中内部高度因为是普通流中的块元素撑起来的，所以这个时候父元素的高度会变成0，或者会有部分浮动元素的位置会超出父元素的高度之外。这种现象，叫做"高度坍塌"。

float 浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo15</title>

    <link rel="stylesheet" href="../css/Demo15.css">

</head>
<body>
    <div id="father"> 
        <div class="layer01"><img src="../../image/img1.jpg" alt=""></div>
        <div class="layer02"><img src="../../image/img2.jpg" alt=""></div>
        <div class="layer03"><img src="../../image/img3.jpg" alt=""></div>
        <div class="layer04">
            浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
        </div>
    </div>
</body>
</html>

/* Demo15 */
div {
    margin: 10px;
    padding: 5px;
}

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

.layer01 {
    border: 1px #F00 dashed;
    display: block;
    float: right;
}

.layer02 {
    border: 1px #00F dashed;
    display: block;
    float: right;
}

.layer03 {
    border: 1px #060 dashed;
    display: block;
    float: right;
}

.layer04 {
    border: 1px #666 dashed;
    display: block;
    float: right;
}

父级边框及塌陷问题

  • 清除浮动的直接目的就是解决前面所说到的高度坍塌问题
clear: right;	右侧不允许有浮动元素
clear: left;	左侧不允许有浮动元素
clear: both;	两侧不允许有浮动元素
clear: none;	允许有浮动元素

解决方案：

1、增高父级元素高度

2、增加一个空的div标签，清除浮动

<body>
    <div id="father"> 
        <div class="layer01"><img src="../../image/img1.jpg" alt=""></div>
        <div class="layer02"><img src="../../image/img2.jpg" alt=""></div>
        <div class="layer03"><img src="../../image/img3.jpg" alt=""></div>
        <div class="layer04">
            浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
        </div>
        
        <div class="clear"></div>
        
    </div>
</body>

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

3、overflow

在父级元素中增加一个 overflow: hidden

#father {
    border: 1px #000000 solid
}

4、在父类添加一个伪类：after

#father {    
    border: 1px #000000 solid
}

#father:after {
    content: '';
    display: block;
    clear：both;
}
posted @ 2022-03-18 15:11  伏月廿柒  阅读(26)  评论(0)    收藏  举报