02 clear

    技术2022-07-12  65

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1{ width: 200px; height: 200px; float: left; background-color: cornflowerblue; } .box2{ width: 200px; height: 200px; float: left; background-color: burlywood; } .box3{ width: 200px; height: 200px; background-color: darkgreen; clear: left; /* box1和box2分别左浮动,理论上box3应该是被覆盖 但是box3设置了clear属性,clear是清除浮动对当前元素的影响 clear的可选值:left (清除左浮动对其的影响 right(清除右浮动对其的影响 both(清除两则中最大影响的一侧 原理:设置clear后浏览器会自动为元素添加上边距,使其不受到浮动的影响 */ } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
    Processed: 0.009, SQL: 9