css中如何解决一个div中有两个div分别设置了左右浮动，这个父div的高度不设置但仍会被两个子div的高度撑开？

Question

<div class="one">
<div class="two"></div>
<div class="three"></div>
</div>
<div class="four"></div>

//css样式设置
.one {
width:1200px;
}
.two {
float:left;
width:500px;
height:500px;
}
.three {
float:right;
width:800px;
height:600px;
}
.four {
width:1200px;
height:200px;
}

//问题描述
这样设置之后.one的高度还是0，而.four是在.two和.three的下面，被遮住了

请问怎么解决？

Answer 1

是因为one没有高度造成的，最直接的办法是设置高度。如果高度不固定
需要用到清除浮动代码：
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}
给one 增加 class名clearfix

或者，在three下面，增加一个div，class名 clear

.clear{clear:both}

Answer 2

one设置overflow:hidden，这样会在在容器中创建一个新的BFC，消除高度塌陷

Answer 3

调试的时候尽量给这些块元素加上颜色，这样能看得见分清楚哪是哪。

1.为什么one的高度是0？
因为作为父级你没有高度，而子级浮动之后他们已经脱离文档流了，父级肯定是包不住的。而且你的父级的宽度也不足以容下two和three。1200<500+800

怎么解决这个问题？
清浮动、父级宽度增加。清浮动有几种方式。

    ⑴、加高度 
        问题：扩展性不好
    ⑵、空标签清浮动
        问题：
            IE6 最小高度 19px；（解决后IE6下还有2px偏差）
            还必须是块属性
    ⑶、br标签清浮动
        问题：不符合工作中：结构、样式、行为，三者分离的要求。
    ⑷、父级设置display: inline-block;
    ⑸、父级也浮动,以浮制浮
    ⑹、after清浮动(目前最方便问题最少的)

上面的1-5方案都会带来一些问题，并且解决方式并不完善,第六个清浮动方式最好,副作用也很小。直接在需要清浮动的元素上加上一个clearfix的class选择器就可以了

    .clearfix:after{
        content: "";
        display: block;
        clear: both;
    }

2.为什么.four在two和.three的下面？

浮动的这两个已经脱离文档流了，就像科幻电影里面的那样，堵车的时候明明大家都排在一起的,可是它飞起来了？？当然就给你遮住了。.four就被排在了下面

Answer 4

1.clear:both
2.设置固定高度
3.利用BFC
4.父元素也浮动