高度塌陷问题解决

最近有点忙，没有更新高度塌陷，今天正好有空，详细来讲一讲高度塌陷的问题和解决办法。

1.什么是高度塌陷

一般来说，如果没有对父元素设置高度，而对子元素设置高度的话，父元素会被相应的撑开

就像这样：

查看代码：

    <style>
        .out-box{
            background-color: pink;
            overflow: hidden;
        }

        .inner-box1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-left: 20px;
        }
    </style>

    <div class="out-box">
        <div class="inner-box1">
        </div>
    </div>

 发现并没有对父元素设置高宽，但是依旧被撑开，但是我们知道，我们在设计页面时常常会使用脱离文档流的方式来达到想要的结果，可是这往往会带来新的问题，以浮动为例，脱离文档流，就像元素浮在了“水面”之上，而这个水面就是我们的文档流，此时元素和文档不再有任何的关系，自然也不会再撑起父元素，此时就会出现父元素的高度塌陷问题。

注意！高度塌陷问题出现在父元素之上，由脱离文档流引发

如下图所示：

代码如下：

<style>
        .out-box{
            background-color: pink;
            overflow: hidden;
        }

        .inner-box1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-left: 20px;
            float: left;
        }
    </style>

    <div class="out-box">
        <div class="inner-box1">
        </div>
    </div

我们可以看到父元素虽然设置了背景颜色可是并没有显示出来，这时便出现了父元素高度塌陷问题，那么我们又该如何解决这个问题呢？

我们在这里提供了几种解决办法

1.将父元素的高度设置为固定值

这是最简单粗暴的一种，设置好父元素的高宽，自然不会出现塌陷问题，可是这种办法并不值得推荐，在我们写代码时，最好不要将一个值固定死，这样也会方便我们后续的修改，

查看效果

代码如下：

        .out-box {
            background-color: pink;
            height: 50px;
        }

 还有一种跟此种方法想法类似但是依旧不推荐使用的方法，这里一并给出，简单来说就是父元素添加一个兄弟元素，从而让这个子元素撑开父元素，

    <style>
        .out-box {
            background-color: pink;
        }

        .inner-box1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-top: 50px;
            float: left;
        }
        .inner-box2{
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
        <div class="out-box">
            <div class="inner-box1">
            </div>
            <div class="inner-box2"></div>
        </div>

 这里为了方便理解，特意给第一个子盒子添加了向下的margin-top: 50px;不推荐的理由很简单，改变了原有的代码格式，这同样是我们写项目时需要避免的一点。

2.开启页面元素隐藏属性：BFC格式化上下文

这就是我们之前说的后面详细介绍BFC，在开启元素的BFC后，元素会变成一个独立的布局区域，不会在布局上影响到外面的元素，这样就能有效避免高度塌陷和之前的外面距重叠问题，

BFC特点

    1.父元素的垂直外面距不会和子元素重叠(解决父子外边距重叠问题)

    2.开启BFC的元素不会被浮动元素所覆盖

    3.开启BFC的元素可以包含浮动的子元素(解决高度塌陷)

如何开启BFC

    1.设置元素浮动，虽然可以撑开父元素，但是会导致父元素宽度丢失

    2.设置元素为inline-block，宽度也会同样丢失，也会出现其他问题(例如三像素问题)

    3.将元素overflow设置为非visible 副作用较小，推荐使用

    4.绝对定位 宽度同样丢失

3.清除浮动

在css中专门有一个css样式叫clear的用于清除浮动带来的影响，有三个属性值可以选，分别是left，right和both，意思为清除左边的右边的和左右的浮动影响，

没有清除浮动之前：

代码：

 <div class="box1">你好</div> 

 添加了一个div，此时再添加clear我们看看效果：

明显看到此时的变化，消除了浮动的影响，不过此种方法改变了页面结构，一般使用较少。

第四种:伪类 最推荐

这种方法也是我们之前提到过的方法 ，可以同时解决高度塌陷和外边距重叠问题，一般是最推荐的方法，也是最为便捷的方法，只需要在css代码中添加：

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

即可。