什么是BFC?

高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时就会导致子元素无法撑起父元素的高度，由此引发父元素的高度塌陷

如何解决

解决方法一： 直接把父元素的高度定死，可以避免高度塌陷问题，但是这种方法后期不方便维护，所以不推荐使用

解决方法三： 开启父元素的BFC

什么叫BFC呢？ 根据W3C的标准，BFC（Block Formatting Context）叫块级格式化上下文，BFC是CSS中隐含的属性，该属性可以设置打开或者关闭，默认是关闭的，当我们为一个元素开启BFC后，该元素会变成一个独立的布局区域，总之BFC的目的就是：形成一个完全独立的空间，让空间里的子元素不会影响到外面的布局，并且触发了BFC的容器具有普通容器所没有的一些特性 那么都有哪些特性呢？

1. 开启BFC的元素不会被浮动元素所覆盖
2. 开启BFC的元素父元素的垂直外边距不会和子元素重叠
3. 开启BFC的元素可以包含浮动的子元素

开启BFC的方式：

1. 设置元素的浮动即float的值不为none（float：left/right/both;）//不推荐，会导致宽度丢失//
2. 将元素的 overflow设为非visible值 (overflow:hidden/scroll/auto;)
3. 将元素设置为行内块元素（display：inline-block;）//不推荐，会导致宽度丢失//
4. 设置元素绝对定位（position：absolute/fixed;）

解决方法三： 为伪元素设置clear:both

这也是最完美的解决方案，除了代码有点多。

.box::after{
    content: "";
    display: block;
    clear: both;
    /* height: 0;overflow: hidden; 为了解决 IE 浏览器的兼容问题 */
    height: 0;
    overflow: hidden;
    /* visibility:hidden;为了去隐藏content中的内容 */
    visibility: hidden;
}

本文由博客一文多发平台 OpenWrite 发布！