当我们设置一个块级元素进行浮动的时候,会使之脱离文档流,使其下面块级元素受到影响,我们需要对其浮动进行处理。
<!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>
