布局中高度塌陷问题

一、什么是高度塌陷
        在浮动布局中，父元素的高度默认是被子元素撑开的

        当子元素浮动后，子元素会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失

        父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱，所以高度塌陷是浮动布局中比较常见的问题，我们必须解决。

二、解决方法
 在了解高度塌陷之后，我们就要了解与其相关的一个东西BFC

BFC（Block Formation Contex）块级格式化环境

BFC是一个CSS中隐藏属性，可以为一个元素开始BFC

开启BFC该元素会变成一个独立的布局区域
 

1、

      给父元素设置固定的高度，但不推荐使用

 2、

      页面元素中的隐含属性：Block Formatting Context 即块格式化上下文，简称BFC

        当开启元素的BFC以后，元素会变成一个独立的布局区域，不会在布局上影响到外面的元素

        BFC 理解为一个封闭的大箱子，箱子内部的元素不会影响到外部。

3、

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

          由于这个div并没有浮动，所以他是可以撑开父元素的高度的，

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

          基本没有副作用