浮动高度塌陷的BFC解决办法

╰半夏微凉° 2022-08-29 05:57 162阅读 0赞

# 什么是高度塌陷？ #

当需求包含父元素高度随子元素变化而变化，即要求浮动的子元素始终得被父元素所包围，但是由于子元素浮动脱离文档流，会出现父元素高度丢失的情况，并且还会影响下一个元素的布局，如：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk3Nzgz_size_16_color_FFFFFF_t_70][]

# BFC：块级格式化环境 #

*  定义：BFC是CSS中一个隐藏的属性，开启BFC的元素会变成一个独立的布局区域
 *  特点1：开启BFC的元素不会被浮动的元素覆盖
 *  特点2：开启BFC后子元素的外边距不会和父元素的外边距重叠
 *  特点3：开启BFC后元素可以包含子元素（解决高度塌陷）

# 开启BFC的方法： #

1.  **设置元素浮动，**有了包围效果，但是仍然会影响下一个元素的布局，所以不推荐

.out{
                background-color: #bfa;
                border: 10px red solid;
                float: left;
            }
            .inner{
                width: 100px;
                height: 100px;
                background-color: burlywood;
                float: left;
            }

1.  **将元素设置为行内块，**不推荐

.out{
                background-color: #bfa;
                border: 10px red solid;
                display: inline-block;
            }
            .inner{
                width: 100px;
                height: 100px;
                background-color: burlywood;
                float: left;
            }

1.  **将overflow属性设置为非visible的值，推荐auto和hidden**

.out{
                background-color: #bfa;
                border: 10px red solid;
               overflow: auto;
               /* overflow: hidden; */
            }
            .inner{
                width: 100px;
                height: 100px;
                background-color: burlywood;
                float: left;
            }

#  #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk3Nzgz_size_16_color_FFFFFF_t_70]: /images/20220829/017a572dd9ed44448a5c3b41b19109cd.png