BFC的触发条件

最新推荐文章于 2024-08-03 17:34:58 发布
最新推荐文章于 2024-08-03 17:34:58 发布
阅读量327 收藏 3
点赞数 1
原文链接：http://www.cnblogs.com/david-lcw/p/10589311.html
版权

BFC（Block Formatting Context）的触发条件

　　BFC（Block Formatting Context ）块级格式化上下文，从字面的意思真的很难理解，我特别喜欢张鑫旭的 " CSS世界的结界 " 的叫法，非常的形象生动，看过火影的同学都知道，非常厉害的忍术都会形成结界，形成一个封闭的空间，里面的人出不来，外面的人进不去，BFC就是如此。

下面是BFC触发的条件，总结一下，没事的时候拿出来看看，增强自己的记忆。

1. float: left / right

2. position: absolute / fixed

3. overflow: auto / scroll / hidden

4. <html> 根元素

5. display: inline-block / table-caption / table-cell  

目前利用BFC特性最多的地方：margin-top 的合并问题，清除浮动问题；当出现BFC的时候这些问题就自然而然的解决了。

转载于:https://www.cnblogs.com/david-lcw/p/10589311.html

weixin_30813225
关注
什么是BFC？它的触发条件有哪些？
越陌度阡
11-13 2732
1. 什么是BFC? Block Fromatting Context， 即块级格式上下文。 W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（如 inline-blocks, tablecells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的 BFC。 2. BFC的触发条件 一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 1.根元素； 2.浮动元素。元素..
前端CSS必知：BFC及其触发条件
清颖的博客
08-08 6713
文章目录1. bfc的理解（块级格式化上下文）2. 触发bfc的方式：3. bfc解决的问题：外边距合并，检测浮动高度，制作右侧自适应盒子4. bfc布局规则特性：5. 两栏布局6. 补充：7. 块元素高度不设或宽度不设的情况。 将本人好久之前的 云笔记 搬到博客上来，统一维护。 1. bfc的理解（块级格式化上下文） 可以看作是隔离了的独立容器，内部元素的布局，不会影响外部元素。 可通过css属性触发。 浮动元素产生了浮动流，块级元素看不到； 文本类属性的元素（inline)，文本元素和产生了bfc的元
BFC的触发条件、布局规则、使用场景
qq_38606793的博客
07-31 877
BFC的触发条件、布局规则、使用场景 BFC指的是块级格式化上下文，简单的来说，BFC就是创建一个盒子，盒子内部的元素布局不影响盒子外部的元素。html根元素就是一个BFC BFC 的触发条件 html根元素 <html> float 不为 none 绝对定位元素 也就是 position 为 absolute 和 fixed 行内快元素 display 为 inline-bl...
BFC及其触发条件
m0_60887160的博客
08-12 233
BFC（块级元素格式化上下文）Block Formatting Contexts 触发条件 overflow不为visible float不为none display:inline-block/table-cell/table-caption position不为absolute/fixed 父元素转换为根元素display:flow-root
认识BFC
最新发布
weixin_43929122的博客
08-03 290
介绍BFC（Block Formatting Context）格式化上下文的几种特性
BFC的布局规则以及触发条件
qq_40301211的博客
03-31 900
1.BFC的含义 ： BlockFormattingContexts（BFC） 块级元素格式化上下文 它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系 块级元素：父级（是一个块元素） 内容：子元素（是一个块元素） 其他元素：与内容同级别的兄弟元素 相互作用：BFC里的元素与外面的元素不会发生影响 ...
BFC概念、触发条件、布局规则以及定位、宽高自适应简述
swlsqf的博客
03-01 661
BFC BFC概念： 解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。 **Box：CSS 布局的基本单位，直观来说，一个页面就是由若干盒子组成。display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子...
BFC是什么？如何触发BFC？（实现两栏/三栏布局）
weixin_56180673的博客
10-29 1345
BFC是什么？如何触发？两栏/三栏布局如何实现？
BFC 触发条件
qq_57985616的博客
04-07 137
2.overflow 不为默认值 visable 可以为hidden,auto,scroll。4.display不为默认值 none 可以为inline-block 或者fixed。5.position不为默认值static，可以为absolute fixed。3.float部位默认值none, 可以为left,right.
触发BFC的条件
thisisaxin的博客
03-01 2818
BFC：上下文块状格式化，是一种表现规则，有独立的渲染区域，他的子元素可以被BFC定义位置。 说明：BFC与其他块状元素不同的是他脱离文档流，隔离开不受其他元素的影响，自己定义自己的样式位置，以及其他属性。 触发条件： 1.当添加了float属性，且float不为none时 2.添加定位，positio值为absolute或fixed 3.将元素强制转换类型（display：inline-bloc...
BFC概念和作用，触发条件
weixin_34191734的博客
03-05 445
1、概念，全称是block format context，块级格式化上下文 2、触发条件 根元素float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible 3、应用场景 自适应两栏布局 &...
如何触发bfc（BFC）
qq_43141894的博客
09-06 2908
如何触发BFC？ float 除了none以外的值 overflow 除了visible 以外的值（hidden，auto，scroll ） display (table-cell，table-caption，inline-block, flex, inline-flex) position值为（absolute，fixed） fieldset元素...
什么是BFC？BFC的触发条件？BFC能解决什么问题？
明平姚的博客
07-22 305
什么是BFC？BFC的触发条件？BFC能解决什么问题？
html触发条件,BFC 及触发条件
weixin_32205057的博客
06-05 329
BFC：Block Format Context块格式化上下文(Block Formatting Context，BFC) 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。块级格式化上下文BFC是一个独立的布局单元即这个元素的布局不会影响到其它的元素(这个元素的内容不会超到外面去，不影响其它的元素)想象：这个元素及其子元素在单独的ifr...
什么是BFC、BFC触发条件及特性
CIA的博客
08-03 160
BFC:块级格式化上下文，独立渲染的区域 触发条件 1. overflow:hidden/scroll/auto; 2. float: left/right 3. position: absolute/fixed 4. display: inline-block/table-caption(表格标题)/table-cell(表格单元格)/flex(弹性盒)/inline-flex(内联弹性盒) 特性 1. 在BFC的区域内，浮动元素的高度会计算在内----》 解决高度塌陷 2. BFC的区域不会和浮动元
关于BFC块级格式化上下文原理及触发条件
u013158011的博客
04-01 720
    这里首先就是了解什么是BFC了，。    经常听到大神说什么清除浮动的原理之类的，什么BFC、FFC、IFC之类的。    如果说上面三个词你一个也不懂，甚至都没听过，那就要好好关注我的博客了，之后会持续更新的。    先来看看BFC是什么？    BFC英文名字全称Block Formatting Context。    关于全称这个东西，了解一下就可以了，但是看到要知道是什么，别一说到...
BFC开启条件
weixin_30892763的博客
04-12 426
当元素CSS属性设置了下列之一时，即可创建一个BFC: float：left|right position：absolute|fixed display: table-cell|table-caption|inline-block overflow: hidden|scroll|auto 转载于:https://www.cnblogs.com/tjyuanpeng/p/366157...
什么是BFC？BFC的形成条件？BFC的应用场景
qq_52822043的博客
09-15 2253
BFC 是块级格式化上下文，是在盒模型下对块级元素进行布局的独立渲染区域，该渲染区域内的元素和区域外的元素是相互隔离的。不同BFC内部的元素互不影响。
BFC原理与应用：原因、触发条件及解决策略
"这篇文章主要探讨了BFC（Block Formatting Context）的概念、原因、触发条件以及其在CSS布局中的应用和重要性。" 在CSS布局中，BFC（Block Formatting Context）是一个关键概念，它定义了一个独立的渲染区域，其中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值