BFC

最新推荐文章于 2020-01-19 21:59:54 发布

weixin_30548917

最新推荐文章于 2020-01-19 21:59:54 发布

阅读量105

点赞数

原文链接：http://www.cnblogs.com/Jamie1032797633/p/10922961.html

版权

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;
        }

参考

BFC——MDN
《css世界》

转载于:https://www.cnblogs.com/Jamie1032797633/p/10922961.html

weixin_30548917

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫