JS每日一题: 如何理解CSS中BFC?

lentoo 发布于2019-08-23 16:58 / 1449人阅读

摘要：期如何理解中定义块格式化上下文，是页面的可视化渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

20190416期

如何理解CSS中BFC?

定义: 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

BFC 特性及应用

同一个 BFC 下外边距会发生折叠

代码理解



//两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，两个盒子之间距离只有 100px，而不是 200px

    
    


// 这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中

BFC 可以包含浮动的元素(清除浮动）

我们都知道，浮动的元素会脱离普通文档流，来看下下面一个例子

// 由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度。如果使触发容器的 BFC，那么容器将会包裹着浮动元素

    


// 下面我们将其清除浮动触发BFC,将可包裹浮动元素

BFC 可以阻止元素被浮动元素覆盖

这里有一个经典的css布局试题(两列自适应布局)就是应用的BFC特性

  left
  right

触发BFC

下列方式会触发BFC(摘抄自MDN)

根元素或包含根元素的元素

浮动元素（元素的 float 不是 none）

绝对定位元素（元素的 position 为 absolute 或 fixed）

行内块元素（元素的 display 为 inline-block）

表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）

表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）

匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）

overflow 值不为 visible 的块元素

display 值为 flow-root 的元素

contain 值为 layout、content或 strict 的元素

弹性元素（display为 flex 或 inline-flex元素的直接子元素）

网格元素（display为 grid 或 inline-grid 元素的直接子元素）

多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）

column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

总结

BFC概念很多同学都没有什么概念，不知道为什么需要清除浮动,margin重叠等等系列骚操作,看完这篇我想应该有个大概了

再来回顾一个BFC的特性

同一个 BFC 下外边距会发生折叠

BFC 可以阻止元素被浮动元素覆盖

BFC 可以包含浮动的元素(清除浮动）

关于JS每日一题

JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案

注绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路

点击加入答题

云服务器 GPU云服务器如何在js中隐藏 js中如何定义字符 js中如何读取文件 js中如何设置编码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103596.html

JS每日一题：如何理解es6中的Proxy？

20190124问: 如何理解es6中的Proxy？试题解析:对proxy的理解，可能会延伸到vue的双向绑定 Proxy（代理）定义可以理解为为目标对象架设一层拦截，外界对该对象的访问，都必须通过这层拦截简单示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

tinysun1234 2019-08-23 14:58 评论0 收藏0
JS每日一题：如何理解es6中的Proxy？

20190124问: 如何理解es6中的Proxy？试题解析:对proxy的理解，可能会延伸到vue的双向绑定 Proxy（代理）定义可以理解为为目标对象架设一层拦截，外界对该对象的访问，都必须通过这层拦截简单示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

PumpkinDylan 2019-08-02 14:09 评论0 收藏0
JS每日一题：深拷贝与浅拷贝的区别？如何实现一个深拷贝

摘要：期深拷贝与浅拷贝的区别如何实现一个深拷贝在回答这个问题前，我们先来回顾一下中两大数据类型基本类型引用类型基本类型基本类型就是值类型存放在栈内存中的简单数据段，数据大小确定，内存空间大小可以分配引用类型引用类型存放在堆内存中的对象，变量实际保 20190311期深拷贝与浅拷贝的区别？如何实现一个深拷贝在回答这个问题前，我们先来回顾一下ＪＳ中两大数据类型基本类型 Undefined...

MiracleWong 2019-08-26 13:37 评论0 收藏0
JS每日一题：函数式编程中代码组合(compose)如何理解?

摘要：期函数式编程中代码组合如何理解定义顾名思义，在函数式编程中，就是将几个有特点的函数拼凑在一起，让它们结合，产生一个崭新的函数代码理解一个将小写转大写的函数一个在字符后加的函数将两个函数组合起来这里假设我们实现了每日一题每日一题显示结果里上面 20190315期函数式编程中代码组合(compose)如何理解? 定义: 顾名思义，在函数式编程中，Compose就是将几个有特点的函数拼凑在...

Kaede 2019-08-23 16:08 评论0 收藏0
JS每日一题：函数式编程中纯函数如何理解?

摘要：期函数式编程中纯函数如何理解概念不依赖执行的上下文，也不影响上下文的变量，输出只由输入决定代码理解一下综上，非纯函数输入依赖外部变量综上，非纯函数输出改变外部变量综上纯函数输出输入不影响外部变量纯函数的好处相信大家发现了，无论是概念还是代码 20190313期函数式编程中纯函数如何理解? 概念: 不依赖执行的上下文，也不影响上下文的变量，输出只由输入决定代码理解一下 // 综上，非...

Zoom 2019-08-23 15:55 评论0 收藏0