关灯
开启左侧

前端面试之BFC

[复制链接]
老蚊子 发表于 2019-4-16 18:15:32 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
什么是BFC
BFC(块格式化上下文): 是Web页面可视化渲染CSS的一部分, 是布局过程中生成块级盒子的区域。也是浮动元素与其他元素的交互限定区域。
简单理解就是具备BFC特性的元素, 就像被一个容器所包裹, 容器内的元素在布局上不会影响外面的元素。
BFC常见应用解决普通文档流块元素的外边距折叠问题
  1. <style>
  2.     * {
  3.         margin: 0;
  4.         padding: 0;
  5.     }
  6.     .demo div {
  7.         width: 40px;
  8.         height: 40px;
  9.     }
  10.     .demo1 {
  11.         margin: 10px 0;
  12.         background: pink;
  13.     }
  14.     .demo2 {
  15.         margin: 20px 0;
  16.         background: blue;
  17.     }
  18. </style>
  19. <div class="demo">
  20.     <div class="demo1"></div>
  21.     <div class="demo2"></div>
  22. </div>
复制代码

可见两个块元素外边距为20px。
我们可以使用BFC来解决这个问题,只需要把两个元素置于不同的BFC中进行隔离。
  1. <style>
  2.     * {
  3.         margin: 0;
  4.         padding: 0;
  5.     }
  6.     .demo {
  7.         overflow: hidden;
  8.     }
  9.     .demo div {
  10.         width: 40px;
  11.         height: 40px;
  12.     }
  13.     .demo1 {
  14.         margin: 10px 0;
  15.         background: pink;
  16.     }
  17.     .demo2 {
  18.         margin: 20px 0;
  19.         background: blue;
  20.     }
  21. </style>

  22. <div class="demo">
  23.     <div class="demo1"></div>
  24. </div>
  25. <div class="demo">
  26.     <div class="demo2"></div>
  27. </div>
复制代码

BFC清除浮动
demo演示:
  1. <style>
  2.     * {
  3.         margin: 0;
  4.         padding: 0;
  5.     }
  6.     .demo {
  7.         border: 1px solid pink;
  8.     }
  9.     .demo p {
  10.         float: left;
  11.         width: 100px;
  12.         height: 100px;
  13.         background: blue;
  14.     }
  15. </style>

  16. <div class="demo">
  17.     <p></p>
  18. </div>
复制代码
可见容器元素内子元素浮动,脱离文档流,容器元素高度只有2px。


解决方法:
  1. .demo {
  2.     border: 1px solid pink;
  3.     overflow: hidden;
  4. }
复制代码

阻止普通文档流元素被浮动元素覆盖
demo演示:
  1. <style>
  2.     * {
  3.         margin: 0;
  4.         padding: 0;
  5.     }
  6.     .demo1 {
  7.         width: 100px;
  8.         height: 100px;
  9.         float: left;
  10.         background: pink
  11.     }
  12.     .demo2 {
  13.         width: 200px;
  14.         height: 200px;
  15.         background: blue;
  16.     }
  17. </style>

  18. <div class="demo">
  19.     <div class="demo1">我是一个左侧浮动元素</div>
  20.     <div class="demo2">我是一个没有设置浮动, 也没有触发BFC的元素</div>
  21. </div>
复制代码
demo2部分区域被浮动元素demo1覆盖, 但是文字没有覆盖, 即文字环绕效果。

解决办法就是触发demo2的BFC。
  1. .demo2 {
  2.     width: 200px;
  3.     height: 200px;
  4.     background: blue;
  5.     overflow: hidden;
  6. }
复制代码

自适应两栏布局
demo演示:
  1. <style>
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6. .container {
  7. }
  8. .float {
  9.     width: 200px;
  10.     height: 100px;
  11.     float: left;
  12.     background: red;
  13.     opacity: 0.3;
  14. }

  15. .main {
  16.     background: green;
  17.     height: 100px;
  18.     overflow: hidden;
  19. }
  20. </style>

  21. <div class="container">
  22.     <div class="float">
  23.         浮动元素
  24.     </div>
  25.     <div class="main">
  26.         自适应
  27.     </div>
  28. </div>
复制代码

如何触发BFC
1. 根元素或包含根元素的元素
2. 浮动元素(元素的 float 不是 none)
3. 绝对定位元素(元素的 position 为 absolute 或 fixed)
4. 行内块元素(元素的 display 为 inline-block)
5. 表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
6. 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
7. 匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)
8. overflow 值不为 visible 的块元素
9. display 值为 flow-root 的元素
10. contain 值为 layout、content或 strict 的元素
11. 弹性元素(display为 flex 或 inline-flex元素的直接子元素)
12. 网格元素(display为 grid 或 inline-grid 元素的直接子元素)
13. 多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
14. column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。


 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


1关注

12粉丝

75帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )