css几种清除浮动的方法

在DIV+CSS布局时，为了实现多种布局，会用到浮动。但是不清除浮动也会产生一些问题。
1、设置浮动会被块级兄弟元素覆盖

<div id="div1">
    <h2>设置浮动会被块级兄弟元素覆盖</h2>
    <div id="div_blank">
      我设置了浮动但是没有背景色
    </div>  
    <div id="div_blue">
      我没有设置浮动，但是有背景色
    </div>

body{ margin: 0;}
    #div1{width:100%;height: 50px;}
    #div_blank{ float: left;font-size: 20px;}
    #div_blue{ background-color: blue; text-align: center;font-size: 20px;}

2、父元素高度塌陷

  <div id="p_id">
    <div id="s_id">我是块元素，设置了浮动</div>
    <span id="s_span">我是span，没有设置浮动</span>
  </div>

    body{ margin: 0;}
    #p_id{ height: 50px;width:1000px;background-color: antiquewhite;
      border: 3px solid black;}
    #s_id{ float:left;width:400px;height:80px;background-color: red;}
    #s_span{ background-color: seagreen;}

3、清除浮动的方法
一、clear:both利用空DIV，清除浮动。
处理方法简单，兼容性好。但是多了很多空的DIV，不利于后期维护。
二、父元素加overflow: hidden
处理方法简单。但是有局限，父元素必须能够包含子元素。
三、:after伪元素
浏览器兼容好。比较难理解，拿来主义直接用。代码如下

    #s1_div{ float: left; width: 260px; height: 40px;
      background-color:darkgray;}
    #s2_div{  width: 260px; height: 40px;
      background-color: darkgoldenrod;}
      .clearfix {/* 触发 hasLayout */ zoom: 1; }
      .clearfix::after{content:"".&quot";; 
        display:block;height:0;clear:both;visibility:hidden;}

  <p>:after伪元素</p>
  <div id="f3" class="clearfix">
      <div id="s1_div">我是灰色，设置了左浮动</div>
      <div id="s2_div">兄弟，我是黄色，不设置浮动</div>
  </div>