<html><head> <meta charset="utf-8"> <title>蝴蝶教程（cainiaoya.com）</title> <style> .div1 { float: left; width: 100px; height: 50px; margin: 10px; border: 3px solid #73AD21; } .div2 { border: 1px solid red; } .div3 { float: left; width: 100px; height: 50px; margin: 10px; border: 3px solid #73AD21; } .div4 { border: 1px solid red; clear: left; } </style></head><body><h2>没有clear</h2><div class="div1">div1</div><div class="div2">div2 - 注意，在HTML代码中，div2在div1之后。但是，由于div1向左浮动，所以div2中的文本围绕着div1流动。</div><br><br><h2>用clear</h2><div class="div3">div3</div><div class="div4">div4 - 在这里,clean:left;将div4移动到浮动的div3以下。值“left”清除向左浮动的元素。您还可以清除“right”和“both”。</div></body></html>