清除浮动方法。

第一种情况：

   .content {
            overflow:hidden;
            100%;
            height:200px;
            border:2px dotted blue;
        }
            .content .left {
                float:left;
                200px;
                border:2px dotted blue;
                height:300px;
                background-image:url("1.jpg")
            }
            .content .right {
                margin-left:200px;
                border:2px solid green;
                height:400px;
                background-image:url("a.png")
            }
        .buttom {
            clear:both;
            height:200px;
            100%;
            border:1px solid red;
        }

  <div class="content">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="buttom"></div>

子div的高度比父div的高度要高， 当父div添加over-flow：hidden/auto；整个界面是以父div的高度为高度的，子div的高度会被隐藏,前提是父div设置高度。如果父div未设置高度，则整个父div会包裹着子div。

原理：必须定义width或zoom:1;同时不能定义height。

优点：代码少，简单，浏览器支持好。缺点：不能和position配合使用，因为超出的尺寸会被隐藏。

2.如果将父div的overflow：hidden删除掉，还想达到这个效果，则，可以如下设置：

<div id="layout">
  <div id='left'>Left</div>
  <div id="right">Right</div>
  <div style="clear:both"></div>
</div>

在父div内添加一个<div style="clear:both"></div> 或者设置clear:left;  父div包裹整个子div。

优点：代码少，简单，浏览器支持好，不易出现怪毛病。缺点，如果页面浮动布局多，就要增加很多空的div。

3.使用伪类：after。必须设置display:block; height:0px;    生成的".",会有高度的。

 #layout:after{
            content:".";
            display:block;
            clear:both;
            visibility:hidden;
            height:0px;
        }
#layout{
　　zoom:1
}

 IE8以上和非浏览器才支持：after;zoom可解决IE6 IE7浮动问题。

优点：浏览器支持好，缺点，要两句代码结合使用，才能让主浏览器都支持。