1.浮动的定义

定义：使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来.

浮动的目的：为了达到自己的布局目的，让指定元素定位在指定位置，并且可以设置浮动后的行级元素的宽高，我们就需要用到浮动

2.为什么要清除浮动

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

原因：当父元素不给高度的时候，内部元素不浮动时会撑开，而浮动的时候，父元素变成一条线。

3.清除浮动的常用方法

（1）加空div（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

1
2
3
4
5
<div class="fahter">
      <div class="big">big</div>
      <div class="small">small</div>
      <div class="clear">额外标签法</div>
 </div>

（2）父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

1
2
3
4
5
 .fahter{   
   width: 400px; 
   border: 1px solid deeppink;
   overflow: hidden;  
}

（3）父级使用after伪元素清除浮动（推荐使用）

1
2
3
4
5
6
7
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
       content: "";
       display: block;
       height: 0;
       clear:both;
       visibility: hidden;
   }

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 .clearfix:after,.clearfix:before{
       content: "";
       display: table;
   }
   .clearfix:after{
       clear: both;
   }
   .clearfix{
       *zoom: 1;
   }

<div class="fahter clearfix">
       <div class="big">big</div>
       <div class="small">small</div>
   </div>
   <div class="footer"></div>