BFC

BFC

Block  Formatting Contex

块级格式上下文

BFC

BFC名为块级格式上下文。

BFC可以理解为一种能力或者特征。具有BFC的元素，无论其子子孙孙如何翻腾，都不会影响外部元素。所以BFC元素不会发生margin重叠，因为重叠就会影响外部元素；并且BFC元素会清除浮动，因为如果元素浮动，父元素高度塌陷，就会影响外部元素。

谁可以有BFC能力

可以去MDN查看全部信息，这里只列出常用的

  • 文档根元素<html>；
  • float不为none；
  • 定位元素position值为absolute、fixed（绝对定位，固定定位）
  • diaplay的值为inline-block、table-cell、table-caption
  • overflow值为auto、scroll、hidden
  • 弹性元素（display为flex或者inline-flex元素的直接子元素）
  • 网格元素（display为grid或者inline-grid元素的直接子元素）

BFC的应用

BFC避免margin重叠和清除浮动并不是主要作用，更重要的可以创建自适应布局。

上面列出的各种拥有BFC的元素，但是如果考虑到兼容性，可以用的其实就不多了。一下是张鑫旭大大总结可以用于IE7及以上版本浏览器适配的自适应解决方案：

1、借助overflow属性

.lbf-content {
            overflow: hidden;
        }

2、融合display:

.lbf-content {
            display: table-cell; width: 9999px;
            /* 如果不需要兼容IE7，下面样式可以省略 */
            *display: inline-block;*width: auto;
        }

但是这两个方案也并不是完美的，第一个方案如果子元素定位父元素的外面可能会被隐藏。第二个方案无法直接让连续英文字符换行。

解决display:table-cell英文字符无法换行的问题：

 .word-break {
            display: table;
            width: 100%;
            table-layout: fixed;
            word-break: break-all;
        }

参考

  1. BFC——MDN
  2. 《css世界》
posted @ 2019-05-25 16:50  Jamie0327  阅读(104)  评论(0)  编辑  收藏  举报
levels of contents