闭合浮动

其实，碰到过一些朋友用overflow:auto;来闭合浮动，虽大多数情况可以达到效果，但也会埋下隐患。反例：

<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>用overflow:auto;来闭合浮动</title> <style> .container { width: 80%; margin: 2em auto; padding: 1em .5em; border: solid 3px #ccc; /*用overflow来闭合浮动*/ overflow: auto; } .main-content { float: left; width: 70%; background: #ccf; height: 100px; } .sidebar { float: right; width: 22%; height: 130px; background: #aff; } a { position: relative; } a:hover:after { content: attr(title); position: absolute; left: 0; top: 20px; background: #adff2f; height: 400px; width: 400px; } </style> </head> <body> <h1>使用overflow的危害</h1> <div class="container"> <div class="main-content"> main-content <a href="http://zh.wikipedia.org" title="指向维基百科！">维基百科</a> <a href="http://baike.baidu.com" title="跳转到百度百科！">百度</a> </div> <div class="sidebar">SIDEBAR</div> </div> </body> </html>

正例，推荐的做法：

<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>更推荐clearfix的方式，来闭合浮动</title> <style> .container { width: 80%; margin: 2em auto; padding: 1em .5em; border: solid 3px #ccc; } .main-content { float: left; width: 70%; background: #ccf; height: 100px; } .sidebar { float: right; width: 22%; height: 130px; background: #aff; } a { position: relative; } a:hover:after { content: attr(title); position: absolute; left: 0; top: 20px; background: #adff2f; height: 400px; width: 400px; } /*更推荐的方式来自YUI3 */ .clearfix { zoom: 1 } .clearfix:after { clear: both; content: '.'; display: block; height: 0; line-height: 0; visibility: hidden } </style> </head> <body> <h1>更推荐clearfix的方式，来闭合浮动</h1> <div class="container clearfix"> <div class="main-content"> main-content <a href="http://zh.wikipedia.org" title="指向维基百科！">维基百科</a> <a href="http://baike.baidu.com" title="跳转到百度百科！">百度</a> </div> <div class="sidebar">SIDEBAR</div> </div> </body> </html>

posted on 2012-03-20 17:42 G.N&K 阅读(77) 评论(0) 收藏举报

刷新页面返回顶部

sking7

导航

公告

闭合浮动