之前页面布局经常使用的是float+position，但是有个问题就是，给元素设置float会脱离文档流，就相当于是在页面中不再占有位置，只是飘在该位置上面。
原理与position类似。
页面效果：
期望效果：
实现代码：
1.html：
<div class="contrainer">
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
</div>
2.css：
.contrainer{
.div1{
background:#000080;
border:1px solid #ff0000;
// height:200px;
}
.div2{
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px
}
.left{
float:left;
width:20%;
height:200px;
background:#DDD
}
.right{
float:right;
width:30%;
height:80px;
background:#DDD
}
}
正常页面应该是下面这个样子，
原因：
想要div1和div2垂直显示，div1下的两个div是并列显示的，因此设置了浮动，但是设置之后由于脱离了文档流，div2直接跳到上面了，div1及div1下的两个div撑不起来。
所以需要对其他元素设置清除浮动，取消设置的浮动所对其他元素带来的影响。
清除浮动原理：
就是需要实现虽然元素设置了浮动，但是还是需要占有自己的位置，不能脱离文档流。
清除浮动有哪些方式？比较好的方式是哪一种？
（1）父级div定义height。
（2）结尾处加空div标签clear:both。
（3）父级div定义伪类:after和zoom。
（4）父级div定义overflow:hidden。
（5）父级div定义overflow:auto。
（6）父级div也浮动，需要定义宽度。
（7）父级div定义display:table。
（8）结尾处加br标签clear:both。
(Q2) 比较好的是第3种方式，好多网站都这么用。