清除浮动影响的方法

• 浮动的概念：让元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者是上一个浮动元素或者是上一个不浮动兄弟元素就停下来

• 高度塌陷：

  • 浮动元素以后，脱离父级内容区域。父级没有内容撑开自身的高度
  • 父级的兄弟元素是按照父级的位置进行布局的，所以页面会乱掉

• 清除浮动的方法：

  1. 给浮动元素的父级设置高度height（不推荐使用）

     缺点：很多情况下 高度都是不缺定的 所有不适用

  2. 以浮制浮，给浮动元素的父元素设置浮动，原理是开启BFC（不推荐使用）

     缺点：只有在父级需要浮动的时候，可以这么清除，否则父级的浮动会影响布局

  3. overflow：hidden；给父级设置，原理也是开启BFC（可以使用）

     优点：简单快捷

     缺点：元素超出的时候，会隐藏超出部分

  4. br清除浮动：在浮动元素的后边书写一个br。br中书写clear属性，值为all

     缺点：增加不必要的元素，不符合样式与结构相分离的要求

  5. clear清浮动法：给浮动元素的下边添加一个块元素，书写样式clear:both

     缺点：增加额外的结构，不符合语义化标准

  6. after伪元素清浮动（推荐）

     可以给所有浮动元素的父级一个 clearFix的类名

     当一个元素需要清除浮动的时候 直接设置clearFix类名即可

.clear:after{
   display: block;   /* 必须块标签才能清浮动 */
   height: 0;        /*高度为0 不占用空间*/
   content:"";       /*必须拥有content属性   内容为空*/
   clear:both;       /*清除浮动*/
}
/* .clearFix{  //兼容ie
   *zoom:1;      //*是css  hack 只有ie6.7 认识
               ie6、7 不支持伪元素，所以需要开启元素的haslayout来清除浮动
}  */