浮动布局及清除浮动的方法

浮动元素的特点：

 		1.脱离标准流的控制，浮动的盒子不再保留原先的位置
        2.行内元素具有浮动，可直接设置宽高属性
        3.块级元素没设置宽度，默认宽度和父级一样宽，但是添加浮动后，大小由内容决定
        4.浮动的盒子中间没有空隙

为什么清除浮动：

  很多情况下，父元素不方便设置高度，高度由子元素撑起，但子元素浮动，就会影响下面的父级元素的排版，为了不影响下面的父元素，就需要清除浮动

== 如何清除浮动：==

   1.额外标签法：
        在浮动元素之后添加一个同级块元素，并清除浮动（clear）
        优点：通俗易懂，书写方便，W3C推荐使用
        缺点：结构化差
   2.给浮动元素的父级元素添加overflow属性（hidden，auto,scrll）
        优点：代码简洁
        缺点：无法显示溢出的部分
   3.::after伪元素法：
        给浮动元素的父级添加
        .footer::after{
           content:"",
           display:block,
           height:0,
           clear:both,
           visibility:hidden
        }
        优点：没有增加标签。结构更简单
        缺点：照顾低版本浏览器