BFC详解（块级格式化上下文，用于清除浮动，防止margin重叠等）

最新推荐文章于 2021-12-13 11:57:38 发布
最新推荐文章于 2021-12-13 11:57:38 发布
阅读量371 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css笔记 文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42714209/article/details/107687967
本文深入解析BFC（块级格式化上下文）的概念与作用，包括其如何独立渲染区域，防止margin重叠及清除浮动。探讨生成BFC的条件，如根元素、特定的display属性值、overflow非visible等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

BFC详解（块级格式化上下文，用于清除浮动，防止margin重叠等）

定义：块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。
  • BFC区域不会与float box重叠
  • BFC是页面上的一个独立容器，子元素不会影响到外面
  • 计算BFC的高度时，浮动元素也会参与计算
哪些元素会生成BFC：
  • 根元素
  • float不为none的元素
  • position为fixed和absolute的元素
  • display为inline-block、table-cell、table-caption，flex，inline-flex的元素
  • overflow不为visible的元素
BFC详解
weixin_47450807的博客
03-21 825
一、写在前面 今天看到一道面试题，主要是关于BFC的理解，下面将针对BFC的相关特性做出总结。 二、何为BFC BFC(Block Formatting Context)格式化上下文，是 web页面中盒子模型布局的CSS渲染模式，指的是一个独立 的渲染区域或者是一个隔离的独立容器。 三、形成BFC的条件 1、浮动元素，float除none以外。 2、定位元素，position(absolute, fixed) 3、display为以下其中之一的值：inline-block,table-cell,table
【CSS知识点】——解决高度塌陷以及BFC详解
m0_50785976的博客
10-29 380
高度塌陷以及BFC详解
BFC(块级格式化上下文)——清除浮动的原理，边距坍塌的原理
cpa0701的博客
09-07 751
目录●BFC到底是什么？●文档流●BFC的定义●触发BFC的条件●BFC的作用1. 可以阻止元素被浮动的元素覆盖（可做两栏布局自适应）2: 可以包含浮动的元素—清除浮动3.解决同一个BFC区域的垂直方向margin塌陷的问题 ●BFC到底是什么？ 简单的来说：BFC就是一个css的一个布局概念，是一个独立的区域，是一个环境。 ●文档流 说BFC之前先说说文档流，文档流分为：浮动流、定位流、普通的标准流，而普通标准流其实就是BFC中的FC。 FC：formatting context的英文缩写，翻译过来就是格
清除浮动及原理&BFC（块级格式化上下文）总结
眼里长着太阳，笑里全是坦荡
07-12 450
清除浮动的方法：1.clear样式：清除浮动之后，元素所在的行不允许有浮动元素；如果有浮动元素会自动换到下一行clear：left/right/both;2.父元素结束标签之前插入清除浮动的块级元素.blankDiv{     clear:both; }3.利用伪元素父元素加上一个类名叫clearfix；在clearfix的最后，添加了一个after的伪元素，通过清除伪元素浮动，达到撑起父元素高度...
前端知识点（一）：BFC(块级格式化上下文)+清除浮动
蒋小姐的博客
12-13 348
1.BFC---块级格式化上下文 只有块级元素能触发BFC,触发了BFC的盒子是一个独立布局的容器，内容元素和外部元素不会互相影响。 （1）触发BFC的方式 根元素 浮动 float:left/right; 固定或绝对定位 position:absolute/fixed; overflow不为visible ...
BFC（块级格式化上下文，防止 margin 重叠，用于清楚浮动）
weixin_52183381的博客
12-07 186
简单来说bfc就是块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。 BFC 区域不会与 float box 重叠 BFC 是页面上的一个独立容器，子元素不会影响到外面 计算 BFC 的高度时，浮动元素也会参与计算 那些元素会生成 BFC： 根元素 float 不为 none 的元素 position 为 fixed 和 absolute 的元素 display 为 table-cell、 table-caption， inline-block、 flex， inline-flex 的元素 ov
前端面试必知：CSS盒模型、BFC与层叠上下文详解
2. **BFC（块级格式化上下文）**： BFC是一个独立的渲染区域，有助于控制元素间的间距和布局。它有以下特点： - IE下通过设置`zoom:1`可触发BFC。 - 触发条件包括根元素、绝对定位、`inline-block`、`table`、...
CSS中的BFC详解（两栏布局和三栏布局）
weixin_45432334的博客
10-09 1705
一、BFC介绍 BFC（Block fomatting context）“块级格式化上下文”。是Web页面中盒模型布局的CSS渲染模式，是一个独立的渲染区域，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 二、形成BFC的条件 1、根元素 2、float属性不为none 3、position为absolute或fixed 4、display为inline-blo...
详解CSS布局：圣杯、双飞翼与BFC布局技术
资源摘要信息: "常见的CSS布局技术包括圣杯布局（Holy Grail Layout）、双飞翼布局（Double-Wing Layout）以及基于块格式化上下文（Block Formatting Context，简称BFC）的布局。这些布局技术在网页设计中扮演着关键...
BFC（Block Formatting Context），块级格式上下文，清除浮动原理
web_xyk的专栏
05-02 520
BFC（Block Formatting Context）：块级格式上下文，它是指一个独立的块级渲染区域，只有块级元素(Block-level BOX)参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。相应的还用IFC（行内元素上下级）等。Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值