CSS清除浮动
引出问题:
<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的三种方法总结,为什么清浮动?浮动会有那些影响?