什么是BFC？如何触发？

最新推荐文章于 2024-01-12 11:12:00 发布
最新推荐文章于 2024-01-12 11:12:00 发布
阅读量187 收藏 1
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cxywxy666/article/details/129118369
版权

1.什么是BFC?

BFC 是 Block Formatting Context（块级格式上下文）的缩写，BFC是一个空间，里面子元素的渲染不影响外面的布局。

2.BFC作用？

  • 清除浮动
  • 解决margin塌陷

3.如何触发？

  • overflow ：hidden
  • display : flex/inline-block/table-cell;
  • position : absolute/fixed
笙箫416
关注
什么是BFC？它的触发条件有哪些？
越陌度阡
11-13 2853
1. 什么是BFC? Block Fromatting Context， 即块级格式上下文。 W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（如 inline-blocks, tablecells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的 BFC。 2. BFC的触发条件 一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 1.根元素； 2.浮动元素。元素..
BFC是什么？如何触发BFC？（实现两栏/三栏布局）
weixin_56180673的博客
10-29 1461
BFC是什么？如何触发？两栏/三栏布局如何实现？
css布局中的BFC问题
田兴的博客
10-19 8845
1. 面试题—双边距（边距重叠） 什么是边距重叠？ 什么情况下会发生边距重叠？ 如何解决边距重叠？ 边距重叠： 两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。 有两种边距重叠的情况： 1. 父子关系的边距重叠 父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距，给父元素添加 overflow：hidden 这样父元素就变为 BFC，不会随子元素产生外边距，但是父元素的高会变化。
BFC 触发与应用
m0_56523483的博客
04-07 275
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响。并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。BFC(Block formatting context)直译为"块级格式化上下文"。避免多列布局由于宽度计算四舍五入而自动换行。清除浮动（让父元素的高度包含子浮动元素）避免某元素被浮动元素覆盖。
触发BFC条件
HDdgut的博客
01-29 214
FC(格式化上下文)、BFC（块级格式化上下文） body根元素 绝对定位元素（postion:absolute/fixed） display:inline-block、table-cells、flex 浮动元素：float(除none以外) overflow：除visible，（hidden、auto、scroll）
触发BFC的条件
qq_40212505的博客
08-23 885
具有浮动（即float不为none） 具有绝对定位或固定定位（position：absolute | fixed） display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible（一般设置overflow：hidden） 会触发BFC ...
前端面试笔记4：BFC(BFC是什么、BFC怎么触发、BFC能解决什么问题)
qq_52287721的博客
12-29 664
BFC 文章目录BFC1. BFC 是什么？2. BFC 怎么触发？3. BFC 具体解决的问题margin 边距合并问题margin 塌陷问题高度塌陷问题 1. BFC 是什么？ 首先要介绍一下关于文档流相关的知识。 文档流分为三个部分： 普通流； 定位流； 浮动流； 这三种流在布局的时候会相互影响，进而产生一些问题。 这些问题要通过一种统一的方式来解决，就是通过 BFC 的方式来解决。 BFC 即 block formatting context ，块级格式化上下文。上下文指的就是区域，实际上 BF
什么是BFC，如何触发？
最新发布
03-08
嗯，用户问我什么是BFC，以及如何触发它。我需要先回忆一下BFC的定义和相关知识。BFC是块级格式化上下文，属于CSS布局中的一个概念。它主要影响元素的布局和浮动，创建一个独立的渲染区域，内部元素不会影响到外部...
前端面试——什么是BFC？
xt_123456的博客
05-09 2684
BFC是块级格式化上下文，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 具有 BFC 特性的元素可以看作是一个被隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素。可以把BFC看作是一个独立的容器，容器里的元素无论怎么动，都不会影响到容器外部的布局。 只要元素满足以下任意一个条件就可以触发 BFC 特性： 1）设置浮动元素float值（除none以外的值） 2）绝对定位元素（position为absolute或fixed） 3）displ
BFC是什么？怎么触发BFC?
weixin_42560424的博客
05-10 710
BFC是“块级格式化上下文”的缩写，是一个独立的渲染区域，内部的元素按照一定规则进行布局，不会影响到外部元素的布局。BFC主要用于解决一些常见的布局问题，例如清除浮动、防止margin重叠等。
DaZeng：BFC的概念、触发、作用及应用
大曾blog
10-24 840
10.21-10.25之 WEB任务（一） 1、一周复习hcj,HTML一般用的也就那些东西，了解一下行内元素、块级元素、行内块元素。 2、清除浮动（好像是五种还是六种方式） 3、BFC（概念、触发、作用、应用） 4、居中问题（水平垂直居中方法，大概有十来种，你自己总结一下） 5、圣杯布局（flex、float、position要会，尤其前两种，gird和table了解就行） 6、轮播图:js原生...
css中的bfc是什么？如何会触发
子玉的博客
01-12 745
7. 匿名表格单元格元素（display 属性为 table、table-row、table-row-group、table-header-group、table-footer-group 之一）。当一个元素触发 BFC 后，它会按照 BFC 的规则来进行布局，与其他元素相互影响时会有特定的行为，例如阻止浮动元素重叠、清除浮动、自适应父元素等。BFC中的元素垂直排列，一个块级元素紧跟在另一个块级元素的下方。BFC中的浮动元素会被包含在BFC中，不会影响到外部元素的布局。BFC中的元素不会与浮动元素重叠。
BFC小结 什么是BFC 如何触发BFC BFC的应用
Hiroshi's
03-04 247
一个元素触发BFC以后，这个元素可以被看做是一个独立的容器。容器里面的元素不会在布局上影响到外部的元素 如何触发BFC BFC有什么特性以及应用 1. 避免外边距重叠 理论上两个div的上下间距应该是200px，实际上只有100px，因为块级元素的margin-bottom和下面的块级元素的margin-top会合并，值取其中的最大值 解决方法： 我们给每个div外面套上一个container，然后每个container加上overflow:hidden触发BFC，这样处于两个BFC中的d.
XML介绍
kv110的专栏
04-17 512
XML
css-BFC概念
rudongdong的博客
02-15 447
在w3c中，是这样解释block-level box的： 在一个块级排版上下文中，盒子是从包含块顶部开始，垂直的一个接一个的排列的相邻两个盒子之间的垂直的间距是被margin属性所决定的，在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的 例如：定义三个div块元素 div{ width:100px; height:100px; } .one{ backgrou...
CSS中的BFC详解：定义、触发方式及应用场景
小王的技术库
05-25 3812
1.什么是BFC? BFC就是一个css的一个布局概念，是一个独立的区域，是一个环境。 Block Formatting Context：块级格式化上下文。 W3C的官方解释： 它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。 BFC的目的：形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。 2.如何触发BFC? float不为non
什么是BFC机制，如何触发BFC（消除浮动带来的父元素塌陷、垂直方向margin重叠、嵌套块级元素父元素margin塌陷）
qq_40261601的博客
02-25 2187
简单来说，BFC提供了一个独立的布局环境，BFC中的元素布局不受外部元素的影响，也不会影响到外部元素。触发BFC的几种方式1、给元素设置浮动 float: left | right2、给元素设置脱离文档流的定位 position: absolute | fixed3、给元素设置内容溢出 overflow: hidden | scroll |auto4、给元素设置 display: flex | inline-block | table-cell。几种常见问题：1、父级外边距折叠塌陷问题2、margi
前端CSS必知：BFC及其触发条件
清颖的博客
08-08 6979
文章目录1. bfc的理解（块级格式化上下文）2. 触发bfc的方式：3. bfc解决的问题：外边距合并，检测浮动高度，制作右侧自适应盒子4. bfc布局规则特性：5. 两栏布局6. 补充：7. 块元素高度不设或宽度不设的情况。 将本人好久之前的 云笔记 搬到博客上来，统一维护。 1. bfc的理解（块级格式化上下文） 可以看作是隔离了的独立容器，内部元素的布局，不会影响外部元素。 可通过css属性触发。 浮动元素产生了浮动流，块级元素看不到； 文本类属性的元素（inline)，文本元素和产生了bfc的元
CSS中的BFC学习
越努力，越幸运！
07-01 964
块级格式化上下文学习总结
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值