源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>编程字典</title> <style> .floating-box { float: left; width: 150px; height: 75px; margin: 10px; border: 3px solid #73AD21; } .after-box { clear: left; border: 3px solid red; } </style> </head> <body> <h2>老办法 - 使用浮动</h2> <div class="floating-box">浮动 box</div> <div class="floating-box">浮动 box</div> <div class="floating-box">浮动 box</div> <div class="floating-box">浮动 box</div> <div class="floating-box">浮动 box</div> <div class="floating-box">浮动 box</div> <div class="floating-box">浮动 box</div> <div class="floating-box">浮动 box</div> <div class="after-box">另外一个盒子，在浮动盒子的后面...</div> </body> </html>
运行结果