H5布局阶段三（浮动）

一. float: 浮动

浮动定义：使元素脱离文档流

  float：
        none: 不浮动；（默认）
        left: 向左浮动；
        right: 向右浮动；
        
        auto: 根据自身所占位置，自动居中
            1.自身必须有宽高
            2.inline-block 或 float 都会使auto失效
            需要填写具体值来调整元素位置

1. 所有的元素都可以浮动。
2. 具有float属性元素在父标签中是不占空间的。
3. float能解决标签之间有间隙的问题。

二. 浮动产生的影响

  1.自身的父元素无法获取宽高
  2.后续的元素会自动补位
  3.浮动会脱离当前文档流，覆盖标准流的元素
  4.auto会失效
  5.块元素可以横排显示(失去独占一行的特性)
  6.行元素可以设置宽度和高度
  7.除了auto以外，依然支持margin
  8.提升半个层级 z-index(后续课程)

浮动的特性

• float 对行内属性标签的影响
    float之后可以设置width和height属性，
    并支持margin和padding属性

• float 对块属性标签的影响
    在没有设置宽高的情况下浮动后，内容撑开宽度高度
    可以使块属性元素并排排列
  使用浮动布局，那么一定要清除浮动，否则原地爆炸！

三. 清除浮动的常见方法

• 为什么要清除浮动？
  父元素的高度是由子元素撑开的，且子元素设置了浮动，父元素没有设置浮动，子元素脱离了标准的文档流，那么父元素的高度会将其忽略，如果不清除浮动，父元素会出现高度不够，那样如果设置border、background、margin设置值，都得不到正确的解析

有以下几种：

  1. 给父级设定宽高
     缺点：父级如果作为容器，直接就写死了，后续元素添加会出问题，而且无法解决元素重叠的问题    
          不推荐使用！ 了解即可

  2. 使用 overflow ：hidden 属性 (超出内容区域的部分，隐藏)
     给父元素添加
     缺点：如果内容需要超出，或者较多时.需求发生冲突
          如果内容没有超过，推荐使用。 较为方便          
     适用场景： 浮动元素较少。

  3. 使用 clear: both  属性;
     clear: 是否允许浮动
         left:  不允许左侧有浮动
         right: 不允许右侧有浮动
         both:  不允许两侧有浮动
     缺点：需要写一个空标签来绑定 clear属性.  
         这个空标签没有html的作用，不符合html标签语义化    
    
  4. 给父级设置 display: inline-block;
     缺点: 父元素的同级之间会留有间隔

  5. 各大主流浏览器之间，兼容性最高的一款，你值得拥有~
      :after伪类： 在....之后添加.....