不設置浮動的效果圖:
box1設置了浮動后:
clear: left之后可還原到 不設置浮動的效果圖
box1 box2都設置了浮動的效果圖
box3清除所有浮動:clear: both
效果圖
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 100px; height: 100px; background-color: yellow; /* * 設置box1向左浮動 */ float: left; } .box2{ width: 200px; height: 200px; background-color: yellowgreen; /* * 由于受到box1浮動的影響,box2整體向上移動了100px * 我們有時希望清除掉其他元素浮動對當前元素產生的影響,這時可以使用clear來完成功能 * clear可以用來清除其他浮動元素對當前元素的影響 * 可選值: * none,默認值,不清除浮動 * left,清除左側浮動元素對當前元素的影響 * right,清除右側浮動元素對當前元素的影響 * both,清除兩側浮動元素對當前元素的影響 * 清除對他影響最大的那個元素的浮動 */ /* * 清除box1浮動對box2產生的影響 * 清除浮動以后,元素會回到其他元素浮動之前的位置 */ /*clear: left;*/ float: right; } .box3{ width: 300px; height: 300px; background-color: skyblue; clear: both; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>