浮动

什么是浮动

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

 选择器 { float: 属性值; }
 none 元素不浮动(默认值)
 left  左浮动
 right 右浮动

清除浮动常用的方式

为什么需要清除浮动？

 1.  父级没高度。
 2.  子盒子浮动了。
 3.  影响下面布局了，我们就应该清除浮动了。

1. 额外标签法

    例如 
    <div style="clear:both"></div>
    或者其他标签（如<br />等）。
   
   优点： 通俗易懂，书写方便
   缺点： 添加许多无意义的标签，结构化较差
   注意： 要求这个新的空标签必须是块级元素。
   

2. 父级添加 overflow 属性

   overflow:hidden | auto | scroll;
   
    优点： 代码简洁
    缺点： 无法显示溢出的部分
    注意： 是给父元素添加代码
   

3.父级添加after伪元素

:after 方式是额外标签法的升级版。给父元素添加：

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

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器

代表网站： 百度、淘宝网、网易等

4. 父级添加双伪元素

给父元素添加

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

优点：代码更简洁

缺点：照顾低版本浏览器

代表网站：小米、腾讯等