什么是高度塌陷？如何解决高度塌陷？

yi什么度塌陷？

一般情况下，我们是不给父元素设置高度的，让其内部的子元素自动撑开父元素的高度，然而子元素若设置浮动，就会脱离文档流，也就撑不开父元素的高度从而导致父元素的高度丢失，影响整个页面布局，这就叫高度塌陷。

当里面黄色方框设置浮动之后

如何解决高度塌陷

一、为父元素直接设置高度（不推荐）

优点:直接，简单

缺点：父元素并没有识别到子元素，只是单纯的设定高度，因此会出现子元素超出的情况

二、子元素开启BFC属性

BFC属性可以让元素成为一个单独的区块，不再受浮动影响，因此不会造成高度塌陷。

要开启BFC属性有以下几种方法：

1.将元素设置成行内块元素

2.overflow设置成hidden方式（推荐）

3.将元素设置为浮动

三、设置clearfix伪类来在父元素之后加上一个空白的伪元素

当我们在浮动元素后面设置了一个空白盒，并给它加上clear属性之后，父元素就可以间接的借助该空白盒子去识别浮动元素。

而实际上我们并不需要特意设置一个空白盒子，只需要设置一个伪元素来进行就可以了。

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