解决浮动副作用高度塌陷

「这是我参与2022首次更文挑战的第20天，活动详情查看：2022首次更文挑战」。

css 浮动 浮动最开始是做文字环绕的,浮动现在主要是用来做布局 会使元素向左或向右移动，其周围的元素也会重新排列。游泳池的水比作是普通文档流, 浮动就是水上面飘着的木板，浮动后元素不再占据空间。

     <div class="box1"></div>
     <div class="box2"></div>
     <div class="box3"></div>

        .box1{
            width: 60px;height: 60px;
            background-color:brown;
            float: left; 
        }
        .box2{
            width: 80px;height: 80px;
            background-color:chartreuse;
            float:left ;
        }
        .box3{
            width: 100px;height: 100px;
            background-color:cornflowerblue;
            float: left;
        }

将三个div（块级元素，单独一行显示）先左浮动后，他们就变成一排了

但是浮动来做布局会有副作用，高度塌陷就是经常遇到的一个问题

<div class="outer">
    <div class="inner"></div>
</div>

.outer{
    border: 10px solid red;
}
.inner{
    width: 100px; height: 100px; 
    background-color:lightsalmon ;
    float: left;
}

我们给外层的 outer 设置一个10px 的边框，按理说outer的宽高会被 里面的 inner 大小所撑开，但是给 inner 设置浮动后，inner不再占据空间， 就变成了下面这种效果

那怎么解决高度塌陷呢？或者说怎么样能够使 outer 把浮动元素也能把 outer 撑开

bfc （ block foramt context ）上下文（语境） 是css的一个隐含属性 ， 是需要触发的

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度时，浮动元素也参与计算

那我们只要使 outer 触发 bfc，就可以了 常见的bfc触发：

• float 只要不是none ， 就触发bfc
• display 为inline-block , table-cel , flex , table-caption
• 绝对定位 postion 为 absolute 或 fixed

/* 解决高度塌陷，推荐使用 */

但是使用float（ float: left; ） 、 postion （position: absolute;）、 display (display: inline-block;) 我们会发现 outer 原本的宽度不见了

但是使用 display: flex; 我们可以看到 outer 保留了自己原本的宽度，所以 解决高度塌陷，更推荐使用 display: flex;

clearfix 就可以完美解决高度塌陷和边框塌陷, 和 使用display: flex显示出来一样的效果

 <div class="outer clearfix" >
        <div class="inner"></div>
 </div>

.clearfix::before, .clearfix::after{
    content: "";
    display: table;
    clear: both;
}