HTML+CSS清除浮动

HTML+CSS清除浮动四种方法

清除浮动的本质是清除浮动元素造成的影响。
如果父盒子本身有高度，则不需要清除浮动。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

语法

语法：
选择器{clear：属性值；}
属性值：

left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

清除浮动的方法

清除浮动的策略是：
闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

1、额外标签法，也称隔墙法，是W3C推荐度做法
在浮动元素末尾添加一个空的标签
例如

 <div style= " clear: 属性值">< /div>

或者其他标签，要求这个新的空标签必须是块级元素
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差

2、父级添加overflow属性
给父级元素添加overflow属性，将其属性值设置为hidden、auto或scroll
缺点：无法显示溢出的部分
优点：代码简洁

3、父级添加after伪元素

  .clearfix:after {
    content:"";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .clearfix {     /*IE6、7专有   */
   *zoom: 1;
  }

4、父级添加双伪元素

 .clearfix:before, .clearfix:after {
   content: "";
   display: table;
  }
 .clearfix:after {
   clear:both;
  }
 .clearfix {
  *zoom: 1;
  }