高度塌陷

1、高度塌陷

一般情况，我们的父元素是不设置高度的，让其被内容自动撑开，如果子元素设置浮动了，

子元素会脱离文档流，就不能再撑开父元素的高度，从而导致父元素的高度丢失，导致页面布局的混乱

这就是高度塌陷问题，这个问题也必须要解决

   解决高度塌陷

      方案一：给父元素设置固定高度,但不推荐使用

      方案二：给元素开启BFC

      方案三：结合clear样式，解决高度塌陷

      方案四：结合clear、伪类，解决高度塌陷

2、BFC

1、什么是BFC

BFC  (Block Formatting Context)   块级格式化上下文  ，元素的隐含属性

     开启BFC后，就相当于把元素单独隔离，成为一个独立的区块，不影响页面的其他元素

     2、开启BFC后，元素有什么特点

       （1）、父元素的垂直外边距就不会跟子元素垂直外边距重叠了（可以解决父子外边距重叠的问题）

       （2）、开启BFC的元素不会被浮动元素覆盖

       （3）、开启BFC的元素可以包裹住浮动的元素（也就是可以解决高度塌陷问题）    

     3、如何开启BFC

        （1）、设置元素浮动

            虽然可以解决高度塌陷，但宽度丢失，而且页面布局混乱的问题也没有解决

        （2）、将元素转成行内块元素

            也可以解决高度塌陷，但宽度丢失，而且会带来三像素问题，也一定程度上影响页面的布局

        （3）、利用overflow样式，非visible默认值   可以是auto、hidden、scroll

            可以解决高度塌陷问题，最大程度不影响页面的布局，副作用相对较小，建议使用

        （4）、设置绝对定位（暂时未讲到）

          虽然可以解决高度塌陷，但宽度丢失，而且页面布局混乱的问题也没有解决

3、解决高度塌陷方案三：

          可以直接在高度塌陷的父元素的最后，添加一个块元素，

然后在对其进行清除浮动，这样可以通过这个空白的块元素来撑开父元素的高度，

          基本没有副作用  使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。

4、解决高度塌陷方案四：

可以通过after伪类向父元素的最后添加一个空白的块元素，然后对其清除浮动，

  这样做和添加一个空白块元素的原理一样，可以达到一个相同的效果，

  而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用