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

最新推荐文章于 2022-09-14 16:41:18 发布
最新推荐文章于 2022-09-14 16:41:18 发布
阅读量315 收藏
点赞数
分类专栏： css笔记 文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42714209/article/details/107687967
版权

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的元素
骑着母猪闯红灯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于BFC的特性，以及如何利用BFC解决margin溢出与margin重叠问题
u012925833的博客
05-22 1823
1. 何为BFC? 文章：https://juejin.im/post/5909db2fda2f60005d2093db#heading-8 BFC概括：可以在心中记住这么一个概念———所谓的BFC就是css布局的一个概念，是一块区域，一个环境。 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与...
弹性盒与BFC
m0_64337756的博客
12-15 326
1.1 弹性盒 弹性盒子是css3新的布局模式 引入弹性盒布局模型的目的是提供一种更加有效的方式 来对一个容器的子元素进行排版、对齐和分配空间。 1.2 容器（父元素）上的属性 1. display : flex 让当前的盒子成为弹性盒子，子元素沿着主轴的方向进行排列，默认的主轴是x轴 子元素的特点 ： 类似于行内块元素（可以设置宽高，不设置宽高，由内容撑开） 子元素的float,clear,vertical-align属性将失效 2. flex-direction
BFC详解
m0_61255374的博客
01-06 159
一、什么是BFC 1.1BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 　　BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的； 1.2
BFC（block formatting context）块级格式化上下文
weixin_44785498的博客
01-12 327
BFC 1 为什么会有BFC？ 从理论上来讲，被包含在父元素里的元素是不会影响到父元素旁边的元素，但实际上并不总是如此。那么有什么办法让里面的元素和外面元素真正隔离开？因此有了BFC 父元素受子元素影响例子：子元素浮动，父元素的高度被压缩变为 0 2 BFC 的定义 BFC: block formatting context 块级格式化上下文。 BFC的目的就是形成一个完成独立的空间，让空间中的子元素不会影响到外面的元素。 3 如何触发 BFC 触发BFC有4种方式 float 不为 none posit
BFC（块级格式化上下文，用于清除浮动，防止margin重叠）
qq_57404393的博客
09-06 155
BFC (block formatting contexts)块级格式上下文。属于定位方案中的普通流。是一个独立的空间，里面的元素不会影响外面的元素。元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移。元素按照其在HTML中的先后位置由上而下布局。在绝对定位布局中，元素会脱离普通文档流。
CSS理解块级格式上下文（BFC）
09-24
BFC(Block formatting context)直译为"块级格式化上下文"。它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干.接下来通过本文给大家介绍CSS理解块级格式上下文（BFC）的相关知识，感兴趣的朋友...
如何理解 CSS 布局和块级格式上下文
12-03
如标题所示，这篇文章主要是讲 块级格式上下文（BFC，Block Formatting Context） 。你可能没听过这个术语，但只要你曾经使用 过CSS 布局，你就能明白它。理解 BFC 是什么、它如何工作、如何创建一个 BFC 是非常有用...
浮动从何而来 我们为何要清除浮动 清除浮动的原理是什么
01-19
浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问...
什么是BFC？ CSS 使用伪元素清除浮动的方法
12-13
　块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上下文”。 先...
BFC（边距重叠解决方案）
m0_59070120的博客
09-14 382
（3）每个元素的margin Box的左边， 与包含块border Box的左边相接触，（对于从左到右的格式化，否则相反）。3、可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内）（4）BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。BFC基本概念：BFC是CSS布局的一个概念，是一块独立的渲染区域，里面元素的布局不会影响到外部元素。（5）BFC 的区域不会与float Box重叠（清浮动）;
BFC（块级格式化上下文，防止 margin 重叠，用于清楚浮动）
weixin_52183381的博客
12-07 136
简单来说bfc就是块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。 BFC 区域不会与 float box 重叠 BFC 是页面上的一个独立容器，子元素不会影响到外面 计算 BFC 的高度时，浮动元素也会参与计算 那些元素会生成 BFC： 根元素 float 不为 none 的元素 position 为 fixed 和 absolute 的元素 display 为 table-cell、 table-caption， inline-block、 flex， inline-flex 的元素 ov
清除浮动及原理&BFC（块级格式化上下文）总结
眼里长着太阳，笑里全是坦荡
07-12 395
清除浮动的方法：1.clear样式：清除浮动之后，元素所在的行不允许有浮动元素；如果有浮动元素会自动换到下一行clear：left/right/both;2.父元素结束标签之前插入清除浮动的块级元素.blankDiv{     clear:both; }3.利用伪元素父元素加上一个类名叫clearfix；在clearfix的最后，添加了一个after的伪元素，通过清除伪元素浮动，达到撑起父元素高度...
BFC(块级格式化上下文)——清除浮动的原理，边距坍塌的原理
cpa0701的博客
09-07 485
目录●BFC到底是什么？●文档流●BFC的定义●触发BFC的条件●BFC的作用1. 可以阻止元素被浮动的元素覆盖（可做两栏布局自适应）2: 可以包含浮动的元素—清除浮动3.解决同一个BFC区域的垂直方向margin塌陷的问题 ●BFC到底是什么？ 简单的来说：BFC就是一个css的一个布局概念，是一个独立的区域，是一个环境。 ●文档流 说BFC之前先说说文档流，文档流分为：浮动流、定位流、普通的标准流，而普通标准流其实就是BFC中的FC。 FC：formatting context的英文缩写，翻译过来就是格
前端知识点（一）：BFC(块级格式化上下文)+清除浮动
蒋小姐的博客
12-13 265
1.BFC---块级格式化上下文 只有块级元素能触发BFC,触发了BFC的盒子是一个独立布局的容器，内容元素和外部元素不会互相影响。 （1）触发BFC的方式 根元素 浮动 float:left/right; 固定或绝对定位 position:absolute/fixed; overflow不为visible ...
学会使用BFC解决margin重叠问题
前端精髓
12-23 737
问题描述：上下两个元素都设置了margin，margin会合并，只保留大的一个 <body> <ul> <li> <div>1</div> </li> <li> <div>1</div> </li> <li...
清除子元素浮动对父元素的影响
最新发布
05-31
清除子元素浮动对父元素的影响可以通过以下两种方式实现： 1. 使用clearfix清除浮动 ...这种方法的原理是使用了BFC（块级格式化上下文），使得父元素形成了一个新的块级格式化上下文，从而清除了浮动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值