引出问题：
<style type="text/css"> .inner { float: right; } </style> <div class="outer"> <img class="inner" src="/images/ilta.png"> <div class="inner">这个图片比包含它的元素还高， 而且它是浮动的，于是它就溢出到了容器外面!</div> </div>
这里没有给最外层的div 设置高度，如果它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。但是当内层元素浮动后，就出现了一下影响：
- 背景不能显示
- 边框不能撑开
- margin 设置值不能正确显示 (padding不会受影响)
1. 使用额外标签法
<style type="text/css"> .inner { float: right; } .clearfix{ clear: both; } </style> <div class="outer"> <img class="inner" src="/images/ilta.png" alt="An Image"> <div class="inner">好多了！</div> <div class="clearfix"></div> </div>
这是早期普遍使用的方法，但是对于有代码洁癖的人来说，解决的不够完美
2.使用 :after 为元素
<style type="text/css"> .inner { float: right; } .clearfix:after{ /*最简方式*/ content: ‘‘; display: block; clear: both; } /* 新浪使用方式 .clearfix:after{ content: ‘‘; display: block; clear: both; height: 0; visibility: hidden; } */ .clearfix{ /*兼容 IE*/ zoom: 1; } </style> <div class="outer clearfix"> <img class="inner" src="/images/ilta.png" alt="An Image"> <div class="inner">好多了！</div> </div>
原理：他是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。
其中clear:both;指清除所有浮动；content: ‘.‘;display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。
3. 利用 overflow:hidden 属性
<style type="text/css"> .outer{ overflow: hidden; zoom: 1;/*兼容 IE*/ } .inner { float: right; } </style> <div class="outer"> <img class="inner" src="/images/ilta.png" alt="An Image"> <div class="inner">好多了！</div> </div>
原理：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除浮动效果，其他两个值都可以，其区据说在于一个对seo比较友好，另个hidden对seo不是太友好，其他区别我就说不上了，也不浪费时间。
4. 父元素浮动
当父元素浮动的时候，无需为子元素的浮动清除浮动,布局时经常用到
<style type="text/css"> .outer{ float: left; } .inner { float: left; } </style> <div class="outer"> <img class="inner" src="/images/ilta.png" alt="An Image"> <div class="inner">好多了！</div> </div>
可以看出虽然 outer DIV 消除了塌陷现象，但由于其也发生了浮动故，其后元素若处于正常文档流，会被跌在底下。
如果要解决可以参考前面的办法。
<style type="text/css"> .outer{ float: left; } .inner { float: left; } .clearfix{ clear: both; } </style> <div class="outer"> <img class="inner" src="/images/ilta.png" alt="An Image"> <div class="inner">好多了！</div> </div> <div class="clearfix"></div>
5. 父元素处于绝对定位
<style type="text/css"> .outer{ position: absolute; } .inner { float: left; } .clearfix{ clear: both; } </style> <div class="outer"> <img class="inner" src="/images/ilta.png" alt="An Image"> <div class="inner">好多了！</div> </div> <div class="clearfix"></div>
与上一个方法同理，由于绝对定位已脱离正常文档流，故出现相同情况，解决办法依旧可以使用以上办法结合，灵活多变。
CSS清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？
