<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="index.css" /> </head> <div class="db group"> <!-- 在含有float的容器中家group class--> <div id="l" style="100px; height: 100px; background: red;"></div> <p>to left</p> </div> <div id="c"> <div style="100px; height: 100px; background: blue;"></div> <p>Not float</p> </div> </html>
#l{ float:left; } #c{ border: 1px solid yellow; } .db{ border: 1px solid aqua; } .group:before, .group:after{ content: ""; display: table; } .group:after{ clear: both; } .group{ zoom: 1; }
-----------------------Ex-----------------------
<!doctype html> <html lang="en"> <head> <title>Sven's Snowshoe Emporium</title> <link rel="stylesheet" href="style.css" /> </head> <body> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <section class="content home group"> <aside> <p>Did you know that Sven's Snowshoe Emporium produces the highest quality snowshoes in North America? <a href="#">Find out more</a>.</p> </aside> <article> <h3>New Fall Styles</h3> <p>Be the first at your resort to sport the hot new tennis-themed snow kicks, now available in the <a href="#">store</a>.</p> </article> </section> </body> </html>
nav li { float: left; } aside { float: right; width: 120px; } article { float: left; width: 120px; } /* clearfix */ .group:before, .group:after { content: ""; display: table; } .group:after { clear: both; } .group { zoom: 1; }