触发BFC条件

最新推荐文章于 2023-05-10 19:53:03 发布
最新推荐文章于 2023-05-10 19:53:03 发布
阅读量182 收藏
点赞数
分类专栏： Web 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HDdgut/article/details/113369059
版权

FC(格式化上下文)、BFC（块级格式化上下文）

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值