css的float，浮动

之前页面布局经常使用的是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种方式，好多网站都这么用。