br标签清浮动

br标签存在一个属性：clear。这个属性就是能够清除浮动的利器，在br标签中设置属性clear，并赋值all。即能清除掉浮动。

    <div id="wrap">
      <div id="inner"></div>
      <br clear="all" />
    </div>

      #wrap {
        border: 1px solid;
      }
      #inner {
        float: left;
        width: 200px;
        height: 200px;
        background: pink;
      }

clear:both清浮动

在最后一个子元素新添加最后一个冗余元素，然后将其设置clear:both,这样就可以清除浮动。在父级元素末尾添加的元素必须是一个块级元素，否则无法撑起父级元素高度

	<div id="wrap">
	    <div id="inner"></div>
	    <div style="clear: both;"></div>
	</div>

	#wrap{
	      border: 1px solid;
	}
	#inner{
	      float: left;
	      width: 200px;
	      height: 200px;
	      background: pink;
	}

伪元素清除浮动

<div id="wrap" class="clearfix">
    <div id="inner"></div>
</div>

      #wrap {
        border: 1px solid;
      }
      #inner {
        float: left;
        width: 200px;
        height: 200px;
        background: pink;
      }
      /*开启haslayout*/
      .clearfix {
        *zoom: 1;
      }
      /*ie6 7 不支持伪元素*/
      .clearfix:after {
        content: '';
        display: block;
        clear: both;
        height:0;
        line-height:0;
        visibility:hidden;//允许浏览器渲染它，但是不显示出来
      }