css bfc margin_51CTO博客

CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)

BFC的理解与应用首先我们来看看w3c规范对BFC的解释，其实对于这种概念的学习上，我们总是建议首先寻找官方的定义，因为原则上来说官方的才是最权威和正确的，而且还比较详细，千万不要因为看到英文就畏惧不前。什么是BFC（Block formatting contexts）w3c规范中的BFC定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks...

外边距

文档流

3c

原创

zhangying2001

2016-08-01 07:57:08

62阅读

《BFC：CSS布局中掌控浮动与margin的核心机制》

本文聚焦CSS中的BFC原理，及其在解决浮动与margin折叠问题中的作用。BFC作为一种独立的渲染区域，像隐形边界般划分布局空间，内部

#css

#前端

CSS

开发者

模块化

原创

技术员阿伟

2月前

0阅读

CSS 之 BFC

CSS 之 BFC

CSS

BFC

原创

珞辰

2017-09-11 22:51:18

1343阅读

2点赞

BFC（Block Formatting Context）是指块级格式化上下文，它是 CSS 中的一个重要概念，用于控制块级盒子在布局时的行为。理解 BFC 对于处理布局、解决布局问题以及避免布局相关的 bug 非常重要。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。创建BFC的一些方法高度坍塌父级元素无法撑起浮动子元素的高度。解决方法，父级元素添加属性overflo

父级元素

添加属性

控制块

BFC

原创

hanwqyq

2024-03-19 18:12:22

43阅读

《BFC：CSS布局中掌控浮动与margin的核心机制》

本文聚焦CSS中的BFC原理，及其在解决浮动与margin折叠问题中的作用。BFC作为一种独立的渲染区域，像隐形边界般划分布局空间，内部元素遵循独特规则，与外部环境隔离。其核心是构建封闭渲染空间，通过特定条件触发，使区域内元素布局独立。利用BFC可约束浮动元素，防止其溢出并避免父元素坍塌，让浮动灵活与布局稳定共存；还能阻断margin跨区域传递，解决折叠问题，使间距计算精准。深层看，BFC体现CSS布局模块化思维，将元素相互影响控制在区域内，让复杂布局可控。理解BFC，能掌握CSS布局底层逻辑，实现从被动调试到主动掌控的转变。

CSS

开发者

模块化

原创

技术员阿伟

3月前

64阅读

深入理解BFC和Margin Collapse

深入理解BFC和Margin Collapse BFC的理解与应用首先我们来看看w3c规范对BFC的解释，其实对于这种概念的学习上，我们总是建议首先寻找官方的定义，因为原则上来说官方的才是最权威和正确的，而且还比较详细，千万不要因为看到英文就畏惧不前。什么是BFC（Block formatting contexts） w3c规范中的BFC定义：浮动元素和绝对定位元素，非块级盒子的块级容器（

清除浮动 bfc

翻译

飛飛飛jjs

2017-06-06 10:56:15

637阅读

css盒模型－BFC

BFC(边距重叠解决方案) 1、BFC的基本概念：块级格式化上下文 2、BFC的原理（说白了就是BFC的渲染规则）：这个规则是什么呢？我觉得大家能说出4点就够了第一个就是BFC可以解决这个元素的垂直的边距发生重叠的情况第二个是BFC的区域不会与浮动元素的box重叠，这个肯定是用来清除浮动的。

边距

解决方案

背景色

使用场景

清除浮动

转载

mob604757020b64

2018-12-18 07:07:00

168阅读

2评论

CSS之BFC理解

CSS之BFC理解BFC的介绍BFC是一种规则，就像孙悟空三打白骨精里面孙悟空划了一个圈让师父和师弟在圈里，这样子白骨精

css

外边距

清除浮动

文档流

原创

秃头小框

2022-11-17 00:18:00

87阅读

【CSS】什么是BFC？

看面经的时候看到这样两个问题：BFC是什么？举个例子？margin重叠问题？如何解决？之前没

定位

css

面试

BFC

外边距

原创

前端充电宝

2022-07-12 17:38:00

102阅读

学会使用BFC解决margin重叠问题

问题描述：上下两个元素都设置了margin，margin会合并，只保留大的一个<body> <ul> <li> <div>1</div> </li> <li> <div>1</div> </li> <li...

css

其他

原创

wu_qiang

2022-11-23 00:09:38

107阅读

css margin 重叠

意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。但是边界的重叠也有例外情况

外边距

盒模型

边距

原创

hongmin118

2023-02-19 22:17:23

337阅读

CSS margin 属性

定义和用法margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。说明这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。注释：允许使用负值。例子 1margin:10px 5px

外边距

css

属性设置

边距

行内元素

转载

mb5fed73533dfa9

2013-05-30 00:32:00

460阅读

2评论

css的margin

1.适合于没有设定width/height的普通block水平元素2.只适用于水平方向尺寸例子：一侧定宽的自适应布局<html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy

html

3c

html5

原创

Immortality1

2022-04-24 18:10:59

262阅读

详解CSS中的BFC

什么是BFC？w3c是这么解释的：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文(block formatting context)。请注意，BFC并不是一个css属性，也不是一段代码，而是css中基于

CSS

BFC

转载

mb6008e8d3f0fac

2021-01-21 11:34:08

165阅读

2评论

CSS中关于触发BFC

一、BFC 定义　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲

css

html

ide

布局规则

转载

八点博客

2022-10-31 12:48:14

118阅读

css【详解】—— margin属性（含margin合并，margin：auto，margin失效）

目录margin合并的场景1. 相邻兄弟元素margin合并2.父级和第一个/最后一个子元素阻止m

内联元素

边距

绝对定位

原创

朝阳39

2022-07-12 21:58:34

971阅读

css Block formatting context BFC

w3c关于BFC解释：http://www.w3.org/TR/CSS21/visuren.html#block-formattingMdn描述：

html

边距

css

ide

清除浮动

转载

mb5fdb0fbba4f73

2013-09-29 05:51:00

118阅读

2评论

前端CSS之BFC详解

BFC是什么？在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的

CSS

布局规则

清除浮动

原创

尚硅谷教育

2023-02-01 09:50:42

109阅读

CSS中重要的BFC

SS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。感兴趣的同学可以加文末的微信群，一起讨论吧～1. 简介在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素

文档流

css

外边距

转载

wx60d4764eb475e

2022-03-29 11:05:40

49阅读

CSS中重要的BFC

SS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。感兴趣的同学可以加文末的微信群，一起讨论吧～1. 简介在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素...

经验分享

转载

wx60d4764eb475e

2021-06-30 11:55:56

105阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

css bfc margin

CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)

《BFC：CSS布局中掌控浮动与margin的核心机制》

CSS 之 BFC

CSS的BFC

《BFC：CSS布局中掌控浮动与margin的核心机制》

深入理解BFC和Margin Collapse

css盒模型－BFC

CSS之BFC理解

【CSS】什么是BFC？

学会使用BFC解决margin重叠问题

css margin 重叠

CSS margin 属性

css的margin

详解CSS中的BFC

CSS中关于触发BFC

css【详解】—— margin属性（含margin合并，margin：auto，margin失效）

css Block formatting context BFC

前端CSS之BFC详解

CSS中重要的BFC

CSS中重要的BFC

css 注意事项 BFC

由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）

分析CSS布局中BFC

CSS中重要的BFC

CSS之margin属性

css///////margin：外边距

CSS margin(外边距)

CSS中的FC到BFC

CSS 中的 BFC 是什么？

51CTO博客

css bfc margin

CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)

《BFC：CSS布局中掌控浮动与margin的核心机制》

CSS 之 BFC

CSS的BFC

《BFC：CSS布局中掌控浮动与margin的核心机制》

深入理解BFC和Margin Collapse

css盒模型－BFC

CSS之BFC理解

【CSS】 什么是BFC？

学会使用BFC解决margin重叠问题

css margin 重叠

CSS margin 属性

css的margin

详解CSS中的BFC

CSS中关于触发BFC

css【详解】—— margin属性（含margin合并，margin：auto，margin失效）

css Block formatting context BFC

前端CSS之BFC详解

CSS中重要的BFC

CSS中重要的BFC

css 注意事项 BFC

由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）

分析CSS布局中BFC

CSS中重要的BFC

CSS之margin属性

css///////margin：外边距

CSS margin(外边距)

CSS中的FC到BFC

CSS 中的 BFC 是什么？

【CSS】什么是BFC？