浮动

浮动

浮动概念介绍

  浮动，正如它的表面意思，就是漂浮在空中，那么它有什么用以及有什么特性，我们看一个例子，假设有两个盒子

.float {
    width: 200px;
    height: 200px;
    background-color: pink;
}
.no-float {
    width: 200px;
    height: 200px;
    background-color: red;
}

  接下来给.float盒子添加浮动，会发生什么

float: left;

  我们发现第二个盒子"消失"了，这是因为粉色的盒子浮动了，那么就相当于飘在了空中，不占据"位置"了，所以红色的盒子就会上去，由于红色盒子的大小和粉色的一样，所以被完全盖住了，所以才看不到红色的盒子，我们把红色的盒子的大小改的大一点，就可以看到有红色盒子的一部分露出来

width: 300px;
height: 300px;

  设置盒子是否浮动的样式是float,它有三个值可选

值	效果
left	向父盒子的左侧浮动
right	向父盒子的右侧浮动
none	不浮动

  我们将上面的红盒子也设置为左浮动看看会发生什么

float: left;

我们发现红色的盒子紧紧地贴着粉色的盒子，这其实就是浮动的用处，让块级元素能够在一行紧紧地贴在一起。

  浮动有一个特性就是，如果盒子浮动了，那么会自动的转换为行内块元素。

  但是，我们从上面发现了一个bug,那就是浮动不占据位置，所以后面的块级盒子会上来和浮动的盒子交叠，这会影响布局，所以一个解决办法就是给浮动的盒子指定一个大盒子，大盒子占据着位置，而它们在大盒子里面浮动，由于大盒子占据着位置，所以下面的盒子不会上来，所以就不会和浮动的盒子交叠。如下

<div class="father">
    <div class="float1"></div>
    <div class="float2"></div>
</div>
<div class="bottom"></div>

.father {
    height: 200px;
}
.float1 {
    width: 200px;
    height: 200px;
    background-color: pink;
    float: left;
}
.float2 {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}
.bottom {
    width: 100px;
    height: 100px;
    background-color: purple;
}

我们看到，由于father指定了高度，而浮动的元素在father里面浮动，所以bottom盒子没有上去。

清除浮动

  但是在实际中，我们又不方便给父盒子高度，因为我们希望父盒子的高度由它的内容高度决定，但是它内容的高度可能是不确定的，比如每天的新闻不可能是一样长的，所以不好给父盒子高度，但是父盒子里面的浮动盒子又不能撑开父盒子，所以使得父盒子的高度为零，下面的盒子还是会上去，还是以上面的程序为例，只不过这时不设置father的高度。

  我们发现下面的紫色盒子上去了，这时因为浮动撑不开父盒子，所以父盒子的高度为零，所以就需要清除浮动，清除浮动的方法有四种。

额外标签法

  额外标签法就是在两个浮动的盒子后面加一个盒子，然后给这个盒子设定clear: both;

<div class="father">
    <div class="float1"></div>
    <div class="float2"></div>
    <div class="else"></div>
</div>
<div class="bottom"></div>

.else {
    clear: both;
}

我们发现浮动的盒子可以撑开父盒子了。

父级元素添加overflow属性

  我们给父级元素father的样式添加overflow属性，overflow属性的取值可以为hidden, auto, scroll

overflow: hidden;

使用after伪元素清除

  在css中添加

.clearfix:after {  
    content: ""; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;  
}   

 .clearfix {
     *zoom: 1;
}                   /* IE6、7 专有 */

然后father盒子调用clearfix类

<div class="father clearfix">

  淘宝，百度，网易使用的就是这种方法。

使用before和after双伪元素清除浮动

  在css中添加

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

然后同上，father盒子调用clearfix类。

  小米，腾讯使用的是这种方法。