minjs1cn / weekly-learning

每周学习分享打卡

0 stars 0 forks source link

23 -【经典面试】什么是BFC？ #23

Open asdzxc01 opened 3 years ago

asdzxc01 commented 3 years ago

什么是BFC？

minjs1cn commented 3 years ago

https://zhuanlan.zhihu.com/p/25321647

Brand0n-Zhang commented 3 years ago

https://github.com/Amarok1217/rumination/blob/master/CSS%E7%9B%B8%E5%85%B3/BFC.md

FE92star commented 3 years ago

块格式化上下文：引用mdn官方文档——https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

OceanApart commented 3 years ago

块级格式化上下文 Block formatting context

Web 页面可视化 CSS 渲染的一部分，是块级盒子布局发生的区域，是浮动元素与其他元素交互的区域。

如何创建

文档根元素 <html>
浮动元素（ float 不为 none）
绝对定位元素（position 为 absolute 或 fixed）
表格单元和表格说明（display: table-cell 或 table-caption）
内联元素（display: inline-block）
块级元素的 overflow 不为 visible 或 clip
弹性伸缩盒子项（display: flex 或 inline-flex 的直接孩子元素）
...

作用

我们通常创建 BFC 是为了不改变布局的情况下调整定位和清除浮动，因为 BFC 可以：

包含内部的浮动
- 浮动定位和清除浮动只会应用于同一个 BFC 内的元素；
- 清除浮动只能作用于同一 BFC 中在它前面的元素；
排除外部的浮动
- 浮动不会影响其他 BFC 中的元素，
避免外边距合并（margin collapsing）
- 外边距合并只会发生在同一个 BFC 的块级元素之间；

tradyau commented 3 years ago

https://github.com/zuopf769/notebook/blob/master/fe/BFC%E5%8E%9F%E7%90%86%E5%89%96%E6%9E%90/README.md

wucuiping commented 3 years ago

BFC， Block Formatting Contexts (块级格式化上下文)，是页面中的一块渲染区域，有一套渲染规则，它决定子元素如何定位，以及和其他元素的关系和相互作用；属于普通流；

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

创建BFC的情况：

html根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC的特性和应用：

在同一个 BFC 里的相邻块级元素，外边距会发生合并，可以将元素放在不同BFC，防止合并；
浮动元素脱离普通文档流，没有设置高度的父元素会出现高度塌陷，将浮动元素放入BFC中，可以解决这个问题；
浮动元素会覆盖后面元素的部分区域，通过将后面元素设置为BFC可以解决这个问题，这个方法可以用来实现两列自适应布局；