<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>CSS3初识(七)布局——高度塌陷与clear属性</title> <style> *{ margin: 0; padding: 0; } div{ font-size: 30px; } .box1{ width: 100px; height: 100px; background-color: #bbffaa; float: left; } .box2{ width: 200px; height: 200px; background-color: greenyellow; float: right; } .box3 { width: 100px; height: 100px; background-color: orange; /*清除box1对box3形成的浮动影响*/ /*clear: left;*/ /*clear: right;*/ clear: both; } /* 由于box1浮动导致box3向上浮动,box3位置发生了改变 如果我们不希望某个元素因为其他元素浮动的影响而改变位置 可以通过clear属性来清除浮动元素对当前元索所产生的影响 clear(清除属性): - 可以通过clear属性来清除浮动元素对当前元索所产生的影响 可选值: left:清除左侧浮动元素对当前元素的影响 right:清除右侧浮动元素对当前元素的影响 both:清除两侧中最大影响的那侧 原理: 设置清除浮动以后,浏览器会自动为元素添加一个上外边距, 以使其位置不受其他元素的影响(开发者工具看不出来) */ </style> </head> <body> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </body> </html>