传统布局方式二---浮动，以及清除浮动的方法

一、浮动（float）的定义

• 使元素脱离文档流、按照指定方向发生移动，遇到父级元素或者相邻的浮动元素停了下来。
• 文档流：文档流是文档中可显示对象在排列时所占用的位置。
• float 的属性值为left、right、none

二、浮动的特性

• 浮动元素会脱离标准流(脱标)
• 浮动的盒子不再保留原先的位置
• 浮动的元素会一行内显示并且元素顶部对齐
• 浮动的元素会具有行内块元素的特性

三、为什么要清除浮动

因为浮动元素脱离了普通流，会出现一种高度坍塌的现象：原来的父容器高度是被子元素撑开的，但是当子元素浮动后，脱离普通流浮动起来，那父容器的高度就坍塌。所以我们需要清除浮动。

四、清除浮动的本质

• 清除浮动的本质是清除浮动元素造成的影响
• 如果父盒子本身有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

五、清除浮动的方法

1. 额外标签法也称为隔墙法，是 W3C 推荐的做法（不常用）。

• 额外标签法会在浮动元素末尾添加一个空的标签。例如 <div style=”clear:both”></div>，或者其他标签（如
  等）。
• 优点： 通俗易懂，书写方便
• 缺点： 添加许多无意义的标签，结构化较差
  2. 父级添加 overflow 属性
• 原理：当给父元素设置"overflow:hidden"时，实际上创建了一个超级属性BFC，此超级属性反过来决定了"height:auto"是如何计算的。在“BFC布局规则”中提到：计算BFC的高度时，浮动元素也参与计算。因此，父元素在计算其高度时，加入了浮动元素的高度，“顺便”达成了清除浮动的目标，所以父元素就包裹住了子元素。
• 优点：代码简洁
• 缺点：无法显示溢出的部分
  4. 父级添加after伪元素

.clearfix:after {   
   content: "";  
   display: block;  
   height: 0;  
   clear: both;  
   visibility: hidden;   
 }  
 .clearfix {  /* IE6、7 专有 */  
   *zoom: 1; 
 }   

• 原理：父级元素的最后，添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。注意到该伪元素的display值为block，即伪元素是一个不可见的块级元素。
• 优点：没有增加标签，结构更简单
• 缺点：照顾低版本浏览器
• 代表网站： 百度、淘宝网、网易等
  5. 父级添加双伪元素

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

• 优点：代码更简洁
• 缺点：照顾低版本浏览器
• 代表网站：小米、腾讯等