我要招人

去企业版

首页 > 试题广场 >

以下哪些样式会创建 BFC ()

[不定项选择题]

以下哪些样式会创建 BFC ()

```
zoom:1
```
```
display:inline-block
```
```
float:left
```
```
float:right
```
```
poistion : absolute
```

查看正确选项

轩辕乖

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与,

哪些情况会产生BFC:

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

发表于 2019-09-26 20:08:03 回复(5)

IoE

创建块格式化上下文 BFC 的方式：

根元素(<html>)
浮动元素（元素的 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或 paint 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

来源：https://url.cn/5qVce5C

发表于 2019-10-14 00:35:53 回复(0)

不遇清辰色

（1）、具有浮动（即float不为none）（2）、具有绝对定位或固定定位（position：absolute |fixed）（3）、display为inline-block, table-cell, table-caption, flex, inline-flex （4）、overflow不为visible（一般设置overflow：hidden）会触发BFC

发表于 2019-07-08 14:41:26 回复(2)

A113

最后选项打错了吧，“poisition”是啥，是“position”好伐

发表于 2021-11-25 08:45:30 回复(0)

燃烧黎明

沙雕，*zoom: 1在Ie7中也有BFC好吧ヽ( ￣д￣;)ノ

发表于 2020-06-26 12:21:38 回复(2)

汪伟明

zoom:1 触发IE浏览器的haslayout达到和现代浏览器BFC的效果,可用于IE6、IE7的清除浮动

发表于 2020-04-07 11:57:41 回复(1)

牛客732865214号

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与, 哪些情况会产生BFC: 根元素 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible

发表于 2021-05-21 15:56:25 回复(0)

lyz5994

BFC：是一个隔离的容器，容器里的子元素不会影响到外面的元素创建BFC：1. float 不为 none；2. position 不为relative或static；3. overflow 不为visible；4. display 为 inline-block、table-cell、table-caption、flex或inline-flex。BFC的作用：1. 清除浮动；2. 自适应两栏布局；3. 避免margin重叠。

发表于 2020-05-11 12:43:54 回复(0)

hungry_&_foolish

ie6及以下的不符合BFC,在ie6中虽然没BFC,

但是有hasLayout,通过开启它：zoom: 1 (副作用小)原意：表示放大几倍

发表于 2022-01-20 15:20:52 回复(0)

在对齐目标的LOLO很讲原则

float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible

发表于 2020-04-23 21:33:27 回复(0)

为你两袖清风

很好的一篇文章介绍BFC的https://www.cnblogs.com/mlw1814011067/p/10397999.html

发表于 2022-07-03 20:26:37 回复(0)

6pences

zoom 缩放

发表于 2019-09-29 01:51:55 回复(0)

ADOTCM

overflow是啥

编辑于 2023-12-15 10:41:31 回复(0)

慢慢99

彻底搞懂CSS里的BFC

如何创建BFC
括号里面是一些副作用

浮动元素：float:left | float:right;【会导致父元素的宽度丢失,也会导致下边的元素上移】
定位元素：position:absolute | position:fixed；
display的一些值：display:inline-block【转为行内块会导致宽度丢失】 | display:flex | display:table | table-cell、table-caption、inline-table、inline-flex、grid、inline-grid；
overflow值不为visible：overflow:hidden;【将会剪切掉溢出的元素】 | overflow:auto、overflow:scroll;
display:flow-root【新属性，BFC创建新方式，没有任何副作用，注意浏览器兼容】

编辑于 2023-06-17 15:25:00 回复(0)

Vue爱好者

Ie6以下通过zoom开启BFC，其他版本会忽略zoom，不知道为啥不选它

发表于 2022-09-27 11:09:59 回复(0)

陌灬逸尘

哪些情况会产生BFC: 根元素 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible

发表于 2022-09-16 00:44:41 回复(0)

XInobukiki

poistion

发表于 2022-09-05 13:03:40 回复(0)

Verthandi

做过又忘了

发表于 2022-05-17 19:07:15 回复(0)

牛客56622593号

BFC“块级格式化上下文”当float属性不为none;

发表于 2022-01-09 18:41:54 回复(0)

无聊★刷刷

bfc,block frame context块级格式上下文

发表于 2021-05-11 22:36:02 回复(0)

提交观点

问题信息

上传者：小小

难度：

24条回答 1694收藏 4707浏览

以下哪些样式会创建 BFC ()

问题信息

热门推荐

相关试题