浮动问题——高度坍塌

浮动问题——高度坍塌

浮动对于刚开始学习web前端的同学来说是必不可少的，而往往看似简单的浮动却有我们意想不到坑，接下来我们便来看看。 

高度坍塌
HTML代码：

<div class="div1">
        <div class="son1">常规流2</div>
        <div class="son2">左浮动</div>
        <div class="son3">右浮动</div>
    </div>
<div class="div3">常规流3</div>

css代码：

.div1{
        width: 200px;
        height: 100px;
        border: 2px solid red;
    }
    .son1{
        width: 60px;
        height: 60px;
        border: 1px solid blue;
    }
    .son2{
        width: 60px;
        height: 60px;
        background: green;
        float: left;
    }
    .son3{
        width: 60px;
        height: 60px;
        background: green;
        float: right;
    }
    .div3{
        width: 100px;
        height: 100px;
        border: 2px solid black; 
    }

效果图：

如图：左浮动和右浮动盒子出现高度坍塌，占领常规流3黑色边框盒子的高度。这个问题，常常困惑着我们，让我们不知道错在哪儿。接下来，便让我们看看正确的样子和方法。

如图：为正确的样子

方法一

给红色边框盒子足够的高。
css代码：

.div1{
        height: 130px;
    }

方法二

在红色边框盒子下加一个同级的空白盒子，然后清除浮动clear:both。
html代码：

 <div class="div1">
        <div class="son1">常规流2</div>
        <div class="son2">左浮动</div>
        <div class="son3">右浮动</div>
    </div>
    <div class="div2"></div>
    <div class="div3">常规流3</div>

css代码：

.div2{
        clear: both;
    }

####方法三
设置红色边框盒子超出部分隐藏。这种方法会使浮动盒子显示不完，超出的部分会被隐藏，一些情况下可用。
css代码：

.div1{
        overflow: hidden;
    }

以上三种方法都可以解决高度坍塌问题，如何选择就看自己喽！