CSS clear属性
作用:clear属性能够设置浮动元素摆布两侧的元素不浮动。
语法:
clear:none | left | right | both;
none: 默认值。许可浮动元素出现在两侧。
left:在左边不许可元素浮动。
right:在右边不许可元素浮动。
both:在摆布两侧均不许可元素浮动。
CSS clear属性的运用示例
<!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 - 测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!</div> <p>注重,在HTML代码中,div2在div1以后。然则,因为div1向左浮动,所以div2中的文本缭绕div1活动。</p> <br><br> <h2>运用clear消灭浮动</h2> <div class="div3">div3</div> <div class="div4">div4 - 测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本! </div> <p> 申明:运用clear: left;将div4向下移动到浮动div3下面;值“Left”消灭浮动到左边的元素。我们还能够运用clear属性的“right”和“both”值。</p> </body> </html>
效果图:
以上就是clear属性怎样用的细致内容,更多请关注ki4网别的相干文章!