引出问题：
<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>与上一个方法同理，由于绝对定位已脱离正常文档流，故出现相同情况，解决办法依旧可以使用以上办法结合，灵活多变。
摘自： 清除浮动（clearfix hack）
CSS清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？
浅谈 CSS 清除浮动的 6 种方法
CSS清除浮动
原文地址：https://www.cnblogs.com/dxchen/p/6245627.html