<!doctype html> <html> <head> <meta charset="utf-8"> <title>Clear Test A</title> <style type="text/css"> .box { background: #000; border: 1px solid #F00; padding: 10px; } .box_left, .box_right { border: 1px solid #FFF; background: #999; width: 200px; height: 150px; } .box_left { float: left; } .box_right { float: right; } .clear { clear: both; height: 20px; background-color: #F00; } </style> </head> <body> <div class="box"> <div> <div class="box_left">float left盒子</div> <div class="box_right">float right盒子</div> <div class="clear"></div> </div> <div> <div class="box_left">float left盒子</div> <div class="box_right">float right盒子</div> <div class="clear"></div> </div> </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Clear Test B</title> <style type="text/css"> .box { background: #000; border: 1px solid #F00; padding: 10px; } .box:after{ content: ‘‘; color:red; display: block; clear: both; height: 20px; background-color: #F00; } .box_left, .box_right { border: 1px solid #FFF; background: #999; width: 200px; height: 150px; } .box_left { float: left; } .box_right { float: right; } </style> </head> <body> <div> <div class="box"> <div class="box_left">float left盒子</div> <div class="box_right">float right盒子</div> </div> <div class="box"> <div class="box_left">float left盒子</div> <div class="box_right">float right盒子</div> </div> </div> </body> </html>
原文：https://www.cnblogs.com/exesoft/p/10684219.html