Home
HTML
HTML
Tryit: HTML
运行 ❯
×
Change Orientation
Change Theme, Dark/Light
<!DOCTYPE html> <html> <head> <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">div 4 - 使用 clear 将 div 4 向下移动到浮动的 div 3 下方。值“left”清除浮动到左侧的元素。 您也可以清除“right”和“both”。</div> </body> </html>