本文主要包含css,清除浮动等相关知识,佚名 希望在学习及工作中可以帮助到您
起源：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>float clearing methods & CSS3 box-shadow and transforms</title> <style type="text/css"> body { text-align: center; } h2 { clear: both; margin: 10px 0; } .group:after{content:" ";display:block;height:0;clear:both;visibility:hidden;} * html .group{ height:1%;} *:first-child+html .group{min-height:1px;} .stage { width: 220px; margin: 0 auto 20px; padding: 0 0 10px; background: yellow; } .col { float: left; width: 100px; height: 100px; border: 1px solid #000; background: red; -moz-box-shadow: 0 0 8px #00f; -webkit-box-shadow: 0 0 8px #00f; box-shadow: 0 0 8px #00f; } .col:hover { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); } .stage-right { float: right; } hr { clear:both; margin: 2em 0;} </style> </head> <body> <h1>Impact of float clearing methods on CSS3 box-shadow and transforms</h1> <a href="http://aloestudios.com/2009/12/goodbye-overflow-clearing-hack/">read the blog post</a> <h2>No Float Clearing Applied</h2> <div class="stage"> <div class="stage-left col"> </div> <div class="stage-right col"> </div> </div> <hr /> <h2>Clearfix Applied</h2> <div class="stage group"> <div class="stage-left col"> </div> <div class="stage-right col"> </div> </div> <hr /> <h2>Overflow: hidden; Applied</h2> <div class="stage" style="overflow: hidden;"> <div class="stage-left col"> </div> <div class="stage-right col"> </div> </div> <hr /> <h2>Overflow: auto; Applied</h2> <div class="stage" style="overflow: auto;"> <div class="stage-left col"> </div> <div class="stage-right col"> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行
对于那些不愿意再给标签添加额外的 clearfix 类来清除浮动的人来说，直接将需要清除浮动的元素添加进清除浮动代码块这个组也是一个办法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>float clearing methods & CSS3 box-shadow and transforms</title> <style type="text/css"> body { text-align: center; } h2 { clear: both; margin: 10px 0; } .group:after{content:" ";display:block;height:0;clear:both;visibility:hidden;} * html .group{ height:1%;} *:first-child+html .group{min-height:1px;} .stage { width: 220px; margin: 0 auto 20px; padding: 0 0 10px; background: yellow; } .col { float: left; width: 100px; height: 100px; border: 1px solid #000; background: red; -moz-box-shadow: 0 0 8px #00f; -webkit-box-shadow: 0 0 8px #00f; box-shadow: 0 0 8px #00f; } .col:hover { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); } .stage-right { float: right; } hr { clear:both; margin: 2em 0;} </style> </head> <body> <h1>Impact of float clearing methods on CSS3 box-shadow and transforms</h1> <a href="http://aloestudios.com/2009/12/goodbye-overflow-clearing-hack/">read the blog post</a> <h2>No Float Clearing Applied</h2> <div class="stage"> <div class="stage-left col"> </div> <div class="stage-right col"> </div> </div> <hr /> <h2>Clearfix Applied</h2> <div class="stage group"> <div class="stage-left col"> </div> <div class="stage-right col"> </div> </div> <hr /> <h2>Overflow: hidden; Applied</h2> <div class="stage" style="overflow: hidden;"> <div class="stage-left col"> </div> <div class="stage-right col"> </div> </div> <hr /> <h2>Overflow: auto; Applied</h2> <div class="stage" style="overflow: auto;"> <div class="stage-left col"> </div> <div class="stage-right col"> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行
对于那些不愿意再给标签添加额外的 clearfix 类来清除浮动的人来说，直接将需要清除浮动的元素添加进清除浮动代码块这个组也是一个办法。