什么是BFC？如何触发BFC

什么是BFC？

BFC(Block formattin context)，直译：“块级格式化上下文”。在页面上形成一个隔离的独立容器，容器里面的子元素不会影响外面的元素。反之亦是。

那些元素具备BFC的条件？

不是所以元素都能产生BFC，w3c规范只有display属性为block，list-item，table的元素，会产生BFC。如：div，h1~h6，p，ul，ol，li等。

如何触发BFC？

具有产生BFC条件，但是触发才能产生BFC，创造封闭的环境。
触发条件：

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

BFC元素的特性

布局规则：

在BFC元素中，里面的元素从顶端开始垂直一个个排列。
BFC的元素垂直方向的距离由Margin决定，属于同一个BFC内的两个相邻的元素的margin会发生重叠。
BFC的元素不会与浮动的元素产生交集，而是紧贴浮动边缘。
计算BFC高度时候，自然会检测浮动或者定位的盒子高度。
简而言之，触发了BFC的元素，是一个独立的渲染区域，不受外界干扰，外界也不受其里面的布局干扰。

BFC的主要用途

清楚元素内部浮动。只要把父元素设为BFC就可以清理子元素的浮动。常见的在父元素设置overflow:hidden;
解决外面局合并问题。同属一个BFC的两个盒子的margin会发生重叠，只需要创建不属于一个BFC的盒子就不会发生margin重叠。
制作右侧（左侧）自适应的盒子。普通流元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己封闭上下文。

什么是BFC？如何触发BFC相关推荐

触发bfc的html元素,什么是BFC？ CSS 使用伪元素清除浮动的方法
BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting co ...
什么是BFC机制，如何触发BFC（消除浮动带来的父元素塌陷、垂直方向margin重叠、嵌套块级元素父元素margin塌陷）
BFC机制 BFC(Block Formatting Context):块格式化上下文 BFC是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其余元素的关系和相互 ...
什么是BFC，如何触发BFC,BFC的作用
BFC:块级格式化上下文理解:BFC属于普通流,相当于一块独立的渲染区域,BFC看成是元素的一种属性, 当元素拥有了BFC属性后,这个元素就可以看做成隔离了的独立容器.容器内的元素不会影响容器外的元 ...
前端CSS必知：BFC及其触发条件
文章目录 1. bfc的理解(块级格式化上下文) 2. 触发bfc的方式 3. bfc解决的问题:外边距合并,检测浮动高度,制作右侧自适应盒子 4. bfc布局规则特性 5. 两栏布局 6. 块元素高 ...
什么是BFC？聊聊BFC及其应用
什么是BFC?聊聊BFC及其应用什么是BFC? 怎样能创建BFC?BFC在哪里? BFC的应用解决margin重叠问题解决高度塌陷的问题什么是BFC?这个在刚接触前端时候一直困扰自己的东西,知 ...
CSS中的BFC BFC详解 BFC可以解决的问题汇总
CSS中的BFC BFC详解 BFC可以解决的问题汇总简介 BFC 全称 Block Formatting Context, 名为 "块级格式化上下文"它是CSS2.1规范定义的 ...
margin 塌陷bug 触发bfc
1.bfc block format context 2.如何触发一个盒子的bfc position:absolute; display: inline-block float:left/right; ...
为什么会有BFC？BFC是什么？如何触发？BFC解决了什么问题？
前端程序员在布局页面时,经常会遇到各种烦人的小问题,比如:每个元素都是一个盒子,盒子外的父元素应该不会受到盒内子的子元素影响,可是事实是这样的吗? 往往,我们会看到子元素浮动后,父元素高度没有了,两栏 ...
BFC的布局规则以及触发条件
1 .BFC的含义 : Block Formatting Contexts(BFC) 块级元 ...