盒子塌陷:子盒子的内容到父盒子外面
这里container:父亲盒子,item:子盒子
子盒子的内容到父盒子外面了,盒子就是塌陷了
产生塌陷的原因:
- 父盒子:没有设置高度 且
- 子盒子:脱离文档流(eg:float:left)
==> 盒子塌陷
解决盒子塌陷问题:
- 对父盒子:把父盒子的高度写死即可 或
- 对子盒子:清除子盒子的浮动
清除子盒子的浮动方法(3个):
- 在子盒子后面添加一个盒子,给其添加clear:both属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { width: 90px; height: auto; background-color: aqua; } .item { float: left; width: 50px; height: 100px; background-color: yellow; } .clear { clear: both; } </style> </head> <body> <div class="container"> <div class="item"></div> <div class="clear"></div> </div> </body> </html>
- 给父盒子添加overflow:hidden
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 开启BFC */ .container { width: 100px; background-color: aquamarine; overflow: hidden; /* IE6 */ zoom: 1; } .item { background-color: bisque; width: 50px; height: 100px; float: left; } </style> </head> <body> <div class="container"> <div class="item"></div> </div> </body> </html>
- 给父盒子添加:after伪元素(最常见)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { background-color: blue; width: 100px; } /*==for IE6/7 Maxthon2==*/ .clearfix { zoom: 1; } .clearfix:after { clear: both; content: ''; display: block; } .item { width: 50px; height: 100px; background-color: blueviolet; float: left; } </style> </head> <body> <div class="container clearfix"> <div class="item"> </div> </div> </body> </html>