企业🤖AI智能体构建引擎，智能编排和调试，一键部署，支持私有化部署方案 广告
``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <style type="text/css"> .outer{ border:10px solid red; } .inner{ width: 100px; height: 100px; background-color: #bfa; float: left; } .box1{ background-color: deeppink; } .box2{ background-color: pink; } </style> </head> <body> <div class="outer"> <div class="inner box1"> </div> <div class="inner box2"> </div> </div> <div style="width: 200px;height:200px;background-color: blue;"></div> </body> </html> ``` 如果父元素不写死高度必然会出现高度塌陷（因为 子元素开启浮动后，会脱离文档流） ![](https://img.kancloud.cn/f2/64/f26471d543d98218fc3787b4e539d9fb_1263x238.png) **BFC(Block Formatting Context)块级格式化环境** * BFC是一个css中的一个隐含的属性,可以为一个元素开启BFC * 开启BFC该元素会变成一个独立的布局区域 ## ## **可以通过一些特殊方式来开启元素的BFC(body自带BFC)** * 1、设置元素的浮动.outer和.inner都加上float:left(不推荐,由于inline-block有难以处理的白边且父元素宽度也没了) ![](https://img.kancloud.cn/dd/11/dd11aebd8bc188b29aba55d0b454f764_1244x189.png) * 2、给父元素outer加上display:inline-block（不推荐,） ![](https://img.kancloud.cn/77/19/77190903621d9a1f073d20d6060bff93_1211x310.png) * 3、将元素的overflow的值设置成一个非visible的值一般是overflow:hidden（overflow:auto也可以但是有滚动条） 其他开启的BFC的方式参见BFC章节 ![](https://img.kancloud.cn/ee/fe/eefef626d8eadca7a2799aa9169981e1_1051x342.png) 例1： ~~~ <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <style type="text/css"> .outer{ border:10px solid red; overflow: hidden; } .inner{ width: 100px; height: 100px; background-color: #bfa; float: left; } .box1{ background-color: deeppink; } .box2{ background-color: pink; } </style> </head> <body> <div class="outer"> <div class="inner box1"> </div> <div class="inner box2"> </div> </div> <div style="width: 200px;height:200px;background-color: blue;"></div> </body> </html> ~~~ ![](https://img.kancloud.cn/fe/b7/feb76ccc0ebf03d37f24dcb0d26980c0_1262x330.png) ## ## **元素开启BFC后的特点** * 1、开启BFC的元素不会被浮动元素所覆盖 当给box1添加浮动时box2被box1覆盖 ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: deeppink; float: left; } .box2{ width: 200px; height: 200px; background-color: #fba; } </style> </head> <body> <div class="inner box1"> </div> <div class="inner box2"> </div> </body> </html> ``` 可以看到box1浮在了box2上面，导致box2看不见 ![](https://img.kancloud.cn/18/03/18030532a37f216585988f29ca2b5179_327x257.png) 然后给box2加上overflow:hidden ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: deeppink; float: left; } .box2{ width: 200px; height: 200px; background-color: #fba; overflow: hidden; } </style> </head> <body> <div class="box1"> </div> <div class="box2"> </div> </body> </html> ``` 给box开启了BFC，浮动元素就不能浮在上面啦 ![](https://img.kancloud.cn/f2/3e/f23e2a7786a7bce238adf3e3ad969ae0_1257x222.png) * 2、开启BFC的元素子元素和父元素外边距不会重叠 ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: deeppink; } .box3{ width: 100px; height: 100px; background-color: blue; margin-top: 100px; } </style> </head> <body> <div class="box1"> <div class="box3"></div> </div> </body> </html> ``` 发现不是box3往下走，而是父元素box1往下走100px， 因为父类容器没有border和padding的时候父元素box1和子元素box3的外边距发生重叠，子元素的外边距传递给了父元素的（当然我们可以给父元素border和padding但是不是完美的解决方案） ![](https://img.kancloud.cn/5f/f0/5ff0266d5994f446fdf87f0adb0bba9b_1263x306.png) 我们再给box1启用BFC`overflow:hidden` ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: deeppink; overflow: hidden; } .box3{ width: 100px; height: 100px; background-color: blue; margin-top: 100px; } </style> </head> <body> <div class="box1"> <div class="box3"></div> </div> </body> </html> ``` ![](https://img.kancloud.cn/d7/40/d74043f2aeabf810e2d6e89373e93ed3_1250x233.png) * 3、开启BFC的元素可以包含浮动的子元素（可以将浮动元素包裹起来而不塌陷） 参考例1