浮动与清除浮动

传统网页布局

网页布局的本质：用CSS来摆放盒子，把盒子摆到相应位置

CSS提供了三种传统布局方式，简单说，就是盒子如何进行排列顺序：

• 标准流
• 浮动
• 定位

 

一、什么是浮动

---

float属性，用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及到包含块或另一个浮动框的边缘。

典型的应用是，让多个块级元素在一行内排列显示。

 

二、浮动隐含的特性

---

1、浮动的盒子脱离标准流

2、不保留原有的位置。覆盖后面属于标准流的盒子，但不覆盖文字（文字环绕）

3、浮动元素自动转换为行内块元素，可以设置宽高属性

 

三、清除浮动

---

父级盒子很多情况下不给宽高，由内容自适应。但如果子元素设为浮动（不占位置），父盒子高度为0，后面的标准流布局会受到影响。所以需要清除浮动。方法有

1. 额外添加标签法，也称为隔墙法
2. 父级添加overflow属性
3. 父级添加 ：after伪元素
4. 父级添加双伪元素

 

1.额外标签法

.fa{border:1px solid #ccc}
.box1,.box2 {float:left; width: 200px;height: 200px;background-color: red;}
.clear {clear: both;}

<div class="fa">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="clear"></div>
</div>

clear：both  本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来

缺点：添加了无意义的标签，语义化差；不太推荐使用。

 

2.给父级添加overflow属性

通过触发BFC方式，实现清除浮动。有关 BFC内容可以参考到BFC:块级格式化上下文

给父级元素添加overflow属性，将其设置为 hidden （auto、scroll） 

浮动元素回到了容器层，把容器高度撑起，达到了清理浮动的效果。

.fa{border:1px solid #ccc; overflow:hidden}
.box{float:left; width: 200px;height: 200px;background-color: red;}

<div class="fa">
  <div class="box"></div>
</div>

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示溢出的部分

 

3.给父级添加 ：after伪元素

.box1,.box2 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: red;
}


.clearfix::after {   /*实质是在最后一个子元素的后面添加了一个空盒子，再设置清除浮动；伪元素是行内元素*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {         /* IE6、7专有 需触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。*/
  zoom: 1;
}

<div class="clearfix">
 <div class="box1"></div>
 <div class="box2"></div>
</div>

优点：没有增加标签，结构更简单 ，符合闭合浮动思想；推荐使用

缺点：需要照顾低版本浏览器（ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.）

 

4、给父级添加 ：before ：after双伪元素

.box1, .box2{
   height:100px;
   width:100px;
   background:yellow;
   float: left;
}

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

<div class="fahter clearfix">
   <div class="box1"></div>
   <div class="box2"></div>
</div>

优点：代码更简洁；推荐使用

缺点：用zoom:1触发hasLayout.

 

四、总结

---

四种方法的优缺点

方式	优点	缺点
额外标签法	书写简单	添加了无意义标签，结构化较差
父级 overflow:hidden	书写简单	溢出隐藏
父级:after伪元素	结构语义化正确	兼容性问题，由于IE6、7不支持:after。需要添加zoom:1 属性
父级:before,:after双伪元素	结构语义化正确	兼容性问题，由于IE6、7不支持:after。需要添加zoom:1 属性

四种方法的方式

通过上面的例子，可以发现清除浮动的方法可以分成两类：

1、在浮动元素的末尾添加一个空盒子利用clear：both清除浮动利用 clear 属性，（1,3,4）

2、触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素（2）