源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>编程字典</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浮动, div2包围整个.</div> <h2>使用 clear</h2> <div class="div3">div3</div> <div class="div4">div4 - 使用 clear 清除浮动 div4 回落到 div3下面. "left" 清除左浮动，你也可以使用 "right" 和 "both".</div> </body> </html>
运行结果