浮动

大家知道，在流式布局里最常见的布局工具就是浮动和定位。

1. 形成脱标

一旦元素设置为了浮动，那么元素就会形成脱标。什么是脱标，脱标指的就是元素脱离原来的位置，浮动在其他没有设置浮动的元素之上。没有设置浮动的元素可以占领设置了浮动的元素的位置，即浮动的元素已经脱离标准文档流。

2. 具有行内块元素的特征
   浮动的元素会自动有了行内块元素的特征，即变成了行内块元素，无论是块元素，还是行元素设置了浮动，都会变成行内块元素，并且具有了行内块元素的特征：可以设置宽高，几个元素可以同时占领一行的特征。

3. 什么时候用浮动呢？内部排列左右元素位置
   一般在设计布局方面，用标准流的父元素。排列上下位置之后，内部元素采取浮动设置左右位置。一般要加浮动着同一元素下的盒子，全部加浮动。

4. 那时候清除浮动？清楚浮动本身就是清除浮动元素造成的影响。
   就是由于父亲盒子很多情况下是不方便给高度的，但是子盒子浮动又不占有位置，最后父亲盒子高度为零时，就会影响下面的标准流盒子。此时就要清除浮动。例如淘宝的图片商品链接，因为根本就不知道到底有多少链接，随时也可能要加链接。所以父元素是不适合给高度，只能清楚浮动，让父元素自动检测高度。

因为父亲盒子里面的那些元素是需要用浮动来排列左右位置的，而父亲盒子又不方便给高度，此时就清除浮动，然后让父亲外部其实是有高度的，是根据里面的浮动元素拥有的高度。
清除浮动之后，父亲就会根据浮动的子元素自动检测高度，父亲就有了高度。

5. 清除浮动的几种方法(3种)
   ①给父级添加样式overflow:hidden(overflow的属性取值：visible hidden scroll auto 具体用法自己查阅)清楚浮动
   ②额外标签法：clear:both。
   额外标签法是W3C推荐的做法，它具体做法就是在所有浮动元素的最后再添加一个标签，再在这个标签的样式添加clear：both
   ③添加双伪元素法 ：：after

     <div class="clearfix"></div>
    <style>   
    .clearfix::after{ 
    content:"";
    height=0;
    display:block;
    visibility:hidden;
    clear:both;
    }
    .clearfix{
    *zoom:1;
    }
    </style>

用clear清除浮动往往会多添加一个div标签，这个标签仅仅是为了清除浮动添加的，没有任何其他意义，所以一般都不建议使用这种方法来清除浮动。
用overflow: hidden的这种方法，清除浮动一般会隐藏超出来的元素部分，所以也不太建议使用这种方法。

所以建议使用最后一种双伪元素方法清除浮动。