CSS基础(16)_布局中高度坍塌问题的解决方式_css 流动布局高度问题-CSDN博客

本文链接：https://blog.csdn.net/no15870678621/article/details/124008470

在浮动布局中，往往父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱，造成高度坍塌，高度塌陷是浮动布局中比较常见的一个问题。

高度塌陷问题:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../browser_default_style/reset.css">
    <link rel="stylesheet" href="../css/Height_collapse.css">
    <title>高度塌陷问题的解决方式</title>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

.container{
    border: 5px solid red;
}
.box1{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    float: left;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: chartreuse;
    float: left;
}

解决方式：
BFC(Block Formatting Context)：块级格式化环境。BFC是css中的一个隐藏属性，可以为一个元素开启BFC，开启BFC后该元素会变成一个独立的布局区域。

可以通过一些特殊方式来开启元素的BFC：
1、设置元素的浮动(缺点：高度不塌，会从文档流中脱离，因浮动导致宽度丢失)
2、将元素设置为行内块元素(缺点：不适合作为外部布局容器，宽度丢失)
3、将元素的overflow设置为一个非visible的值(副作用最小)
4、其他

常用方式：为元素设置overflow：hidden开启其BFC以使其可以包含浮动元素。

效果展示：
类为container的父元素设置元素的浮动,或为元素设置行内块元素后的效果：

.container{
    border: 5px solid red;
    /* 以下两种方式设置，高度不塌，但会导致宽度丢失 */
    float:left;
    /* display:inline-block; */
}

.container{
    border: 5px solid red;
    /* 这种设置就相对方便快捷，临时的处理方案 */
    overflow: hidden;
}

元素开启BFC后的特点：
1、开启BFC的元素不会被浮动元素所覆盖
2、开启BFC的元素子元素和父元素外边距不会重叠
3、开启BFC的元素可以包含浮动的子元素

特点优势：
关于CSS(11)章节的外边距重叠问题,如果开启BFC后，到此就有了更方便的解决方式：

/* 方案3：开启BFC */
.box3{
    width: 100px;
    height: 100px;
    background-color: cadetblue;
    overflow: hidden;  
}
.box4{
    width: 50px;
    height: 50px;  
    background-color: darkgreen;
    margin-top: 50px;
}