原因:
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。
但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。
由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { border: 1px solid; } .c1,.c2 { 100px; height: 100px; float: left; } .c1 { background: red; } .c2 { background: blue; } </style> </head> <body> <div class="box"> <div class="c1"></div> <div class="c2"></div> </div> </body> </html>
解决办法:
1、给父元素一个固定高度,但是一旦高度写死,父元素的高度将不能自动适应子元素的高度,所以此方法适用于子元素高度已知并且固定的情况,是不推荐使用的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { border: 1px solid; height: 200px; } .c1,.c2 { 100px; height: 100px; float: left; } .c1 { background: red; } .c2 { background: blue; } </style> </head> <body> <div class="box"> <div class="c1"></div> <div class="c2"></div> </div> </body> </html>
2、在父元素最后添加一个空的div,为这个div设置clear:both;这样无疑是增加了无意义的标签,一个大型页面中,这种标签太多是不好的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { border: 1px solid; } .c1,.c2 { 100px; height: 100px; float: left; } .c1 { background: red; } .c2 { background: blue; } .clear {clear: left;} </style> </head> <body> <div class="box"> <div class="c1"></div> <div class="c2"></div> <div class="clear"></div> </div> </body> </html>
3、给父元素添加 overflow:hidden;这是开发中最应用最多的一种做法。
这个属性和值是当内容超过其父元素时,可以使用该属性和值将溢出的部分裁剪掉。
当子元素浮动时,给父元素添加overflow:hidden,按照它的本身特性,应该将子元素超出的部分截掉,但是因为子元素有浮动,无法裁剪,所有只能由父元素增加高度去包裹住子元素,使得父元素拥有了高度,而这个高度是跟随子元素自适应的高度,这样就把浮动的子元素包含在父元素内了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { border: 1px solid; overflow: hidden; } .c1,.c2 { 100px; height: 100px; float: left; } .c1 { background: red; } .c2 { background: blue; } </style> </head> <body> <div class="box"> <div class="c1"></div> <div class="c2"></div> </div> </body> </html>
4、通过伪元素选择器::after清除浮动,缺点代码过多。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { border: 1px solid; } .c1,.c2 { 100px; height: 100px; float: left; } .c1 { background: red; } .c2 { background: blue; } .box::after { content: ""; display: block; clear: left; } </style> </head> <body> <div class="box"> <div class="c1"></div> <div class="c2"></div> </div> </body> </html>
总结:推荐使用第三种解决方案,代码量和带来的影响最小。