在浮动布局中，我们希望页面的高度并不是完全定死的，父元素的高度默认是被子元素撑开的，即父元素并没有设置高度。 当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离 将会无法撑起父元素的高度，导致父元素的高度丢失 父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱 所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>document</title> <style> .box{ width: 300px; background-color: #bbffaa; border: 5px solid yellow; } .content{ width: 100px; height: 100px; background-color: red; float: left; } </style> </head> <body> <div class="box"> <div class="content"></div> </div> </body> </html>第一种处理方法：
开启元素的 BFC(Block Formatting Context) 块级格式化环境
BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC 开启BFC该元素会变成一个独立的布局区域 元素开启BFC后的特点： 1.开启BFC的元素不会被浮动元素所覆盖 2.开启BFC的元素子元素和父元素外边距不会重叠 3.开启BFC的元素可以包含浮动的子元素 可以通过一些特殊方式来开启元素的BFC： 1、设置元素的浮动（不推荐） 2、将元素设置为行内块元素（不推荐） 3、将元素的overflow设置为一个非visible的值，如hidden,auto（推荐设置） 常用的方式 为元素设置 overflow:hidden 开启父元素的BFC 以使其可以包含浮动元素例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>document</title> <style> .box{ width: 300px; background-color: #bbffaa; border: 5px solid yellow; overflow: hidden; /*这里是新加的*/ } .content{ width: 100px; height: 100px; background-color: red; float: left; } </style> </head> <body> <div class="box"> <div class="content"></div> </div> </body> </html>第二种方法：
使用::after伪类，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>document</title> <style> .box{ width: 300px; background-color: #bbffaa; border: 5px solid yellow; /* overflow: hidden; */ } .content{ width: 100px; height: 100px; background-color: red; float: left; } /*这里是新加的*/ .box::after{ content: ' '; clear: both; display: table; } </style> </head> <body> <div class="box"> <div class="content"></div> </div> </body> </html>这里推荐使用第二种，因为
.box::after{ content: ' '; clear: both; display: table; }这个代码块再加一点变成
.clearfix::before, .clearfix::after{ content: ' '; clear: both; display: table; }既可以解决高度塌陷，又可以解决
父子元素间相邻外边距，子元素的会传给父元素(上外边距) 父子外边距的折叠会是响到页面的布局，必须要进行处理
这种情况
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>document</title> <style> .box{ width: 300px; height: 200px; background-color: #bbffaa; } .content{ margin-top: 100px; width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="box"> <div class="content"></div> </div> </body> </html>只需要在需要用到的地方父元素的class属性中加上clearfix就可以解决问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>document</title> <style> .box{ width: 300px; height: 200px; background-color: #bbffaa; } .content{ margin-top: 100px; width: 100px; height: 100px; background-color: red; } .clearfix::before, .clearfix::after{ content: ' '; clear: both; display: table; } </style> </head> <body> <div class="box clearfix"> <div class="content"></div> </div> </body> </html>这种用法是很常见的用法
