BFC小结 什么是BFC 如何触发BFC BFC的应用

最新推荐文章于 2024-07-05 16:16:06 发布
最新推荐文章于 2024-07-05 16:16:06 发布
阅读量219 收藏
点赞数 1
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dyw3390199/article/details/114341122
版权

一个元素触发BFC以后，这个元素可以被看做是一个独立的容器。容器里面的元素不会在布局上影响到外部的元素

在这里插入图片描述

如何触发BFC

在这里插入图片描述

BFC有什么特性以及应用

1. 避免外边距重叠

在这里插入图片描述
理论上两个div的上下间距应该是200px，实际上只有100px，因为块级元素的margin-bottom和下面的块级元素的margin-top会合并，值取其中的最大值

解决方法：
我们给每个div外面套上一个container，然后每个container加上overflow:hidden触发BFC，这样处于两个BFC中的div cube就不会相互影响了
在这里插入图片描述

2. 清除浮动

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3. 阻止元素被浮动元素覆盖

在这里插入图片描述
在这里插入图片描述

Akimoto Hiroshi
关注
专栏目录
前端CSS必知：BFC及其触发条件
清颖的博客
08-08 6694
文章目录1. bfc的理解（块级格式化上下文）2. 触发bfc的方式：3. bfc解决的问题：外边距合并，检测浮动高度，制作右侧自适应盒子4. bfc布局规则特性：5. 两栏布局6. 补充：7. 块元素高度不设或宽度不设的情况。 将本人好久之前的 云笔记 搬到博客上来，统一维护。 1. bfc的理解（块级格式化上下文） 可以看作是隔离了的独立容器，内部元素的布局，不会影响外部元素。 可通过css属性触发。 浮动元素产生了浮动流，块级元素看不到； 文本类属性的元素（inline)，文本元素和产生了bfc的元
BFC是什么？如何触发BFC？（实现两栏/三栏布局）
weixin_56180673的博客
10-29 1341
BFC是什么？如何触发？两栏/三栏布局如何实现？
css布局中的BFC问题
田兴的博客
10-19 8676
1. 面试题—双边距（边距重叠） 什么是边距重叠？ 什么情况下会发生边距重叠？ 如何解决边距重叠？ 边距重叠： 两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。 有两种边距重叠的情况： 1. 父子关系的边距重叠 父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距，给父元素添加 overflow：hidden 这样父元素就变为 BFC，不会随子元素产生外边距，但是父元素的高会变化。
什么是BFC？用来解决什么问题？什么情况下开启BFC？
最新发布
yyf8259的博客
07-05 611
什么是行盒呢？span、img、a这些标签，通常这些标签在浏览器渲染完成后在页面上展示的效果都是的，并且会有以下特性。1.不能设置宽高。2 可以设置padding，水平方向有效。但是垂直方向不会占据实际空间 3.border边框同理。4。margin外边距同理。什么是块盒呢？div、H1、table、ul这些标签，通常这些标签在浏览器渲染完成后在页面上展示的效果都是的，宽高、边框、内外边距都会生效。根据来讲，行元素一般是展示具体的内容，然后再用块元素做具体的规划布局。。
什么是BFC，如何触发BFC,BFC的作用
打工人
04-19 2996
BFC：块级格式化上下文 理解：BFC属于普通流，相当于一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素. BFC的布局规则 一、内部的Box会在垂直方向，一个接一个地放置。 二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置） 三、每个元素的margin box的左边， 与包含块border box的左边相接触 四、BFC的区域不会
XML介绍
kv110的专栏
04-17 476
XML
什么是BFC以及如何触发BFC
TX9271000911的博客
07-13 311
什么是BFC：块级格式化上下文怎么触发BFC：定位(不能是static和relctiv)、浮动(除none)、display(inline-block、table-cell、table-caption、flex、inline-flex)overflow（除visible）作用：利用BFC避免margin重叠（塌陷）防止文字环绕、清除浮动的影响，其实作用就是解决我们布局中所存在盒子的塌陷问题...
什么是BFC？ CSS 使用伪元素清除浮动的方法
12-13
BFC概念： 　块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上...
10分钟理解CSS BFC原理及其应用
09-27
当父元素触发BFC（如设置`overflow: hidden`），它会自动扩展以包裹所有浮动的子元素。 3. **防止元素被浮动元素覆盖**：BFC可以帮助防止非浮动元素被内部的浮动元素覆盖。通过创建BFC，元素会保持其正常布局，不会...
前端面试笔记4：BFC(BFC是什么、BFC怎么触发、BFC能解决什么问题)
qq_52287721的博客
12-29 568
BFC 文章目录BFC1. BFC 是什么？2. BFC 怎么触发？3. BFC 具体解决的问题margin 边距合并问题margin 塌陷问题高度塌陷问题 1. BFC 是什么？ 首先要介绍一下关于文档流相关的知识。 文档流分为三个部分： 普通流； 定位流； 浮动流； 这三种流在布局的时候会相互影响，进而产生一些问题。 这些问题要通过一种统一的方式来解决，就是通过 BFC 的方式来解决。 BFC 即 block formatting context ，块级格式化上下文。上下文指的就是区域，实际上 BF
bfc是什么_BFC的触发和作用
weixin_39882623的博客
11-27 249
前言：BFC的全称是块级格式化上下文，是很抽象的概念，具体是什么很难说清，但是一定要了解如何触发BFC和BFC有那些作用。面试里如果遇到如何遇到问什么是BFC的话，不要试着去说什么是BFC，就是块级格式化上下文，尽量说BFC的作用，以及如何触发，这就是BFC。如何触发BFC？根元素，即HTML元素float不为noneoverflow的值不为visibledisplay的值为inline-bloc...
BFC的布局规则
关注我！带你一路 "狂飙" 到底！
10-09 522
BFC BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 BFC的布局规则 一、内部的Box会在垂直方向，一个接一个地放置。 二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置） 三、每个元素的margin box的左边， 与包含.
bfc的触发和作用
yezi153的博客
11-16 95
bfc会形成一个独立的渲染区域，这个区域的内容和其他区域隔开 触发bfc的方式
什么是BFC？怎么触发BFC？BFC应用在哪？
lan_shen的博客
04-25 160
BFC是什么？ （Block formatting context）块级格式上下文 它是一个独立的渲染区域，只有Block-level box 参与，就像一个大的容器，里面装的东西不管如何折腾都出不了这个容器。 怎么触发BFC？ 注意：根元素 HTML默认 就是一个BFC 1，float属性不为none 2，position 为 absolute 或 fixed 3，display 为 inline-block，table-cell，table-caption，flex，inline-flex 4，ov
BFC规则以及如何触发
qq_45164496的博客
06-10 1059
BFC是什么？ 块级格式上下文，一个独立的渲染区域，BFC也可以看作是一种规则，触发了BFC规则的元素，就像是一个独立的容器，容器里面的元素不会在布局上影响外面的元素，就像被隔离了一样 BFC规则： 1、 ...
什么是BFC机制，如何触发BFC（消除浮动带来的父元素塌陷、垂直方向margin重叠、嵌套块级元素父元素margin塌陷）
qq_40261601的博客
02-25 2004
简单来说，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是什么？如何会触发
子玉的博客
01-12 590
7. 匿名表格单元格元素（display 属性为 table、table-row、table-row-group、table-header-group、table-footer-group 之一）。当一个元素触发 BFC 后，它会按照 BFC 的规则来进行布局，与其他元素相互影响时会有特定的行为，例如阻止浮动元素重叠、清除浮动、自适应父元素等。BFC中的元素垂直排列，一个块级元素紧跟在另一个块级元素的下方。BFC中的浮动元素会被包含在BFC中，不会影响到外部元素的布局。BFC中的元素不会与浮动元素重叠。
什么是BFC，如何触发BFC
2301_78102450的博客
06-22 138
每个元素的左边边缘，与包含块的父盒子的左边缘相接触，即使存在浮动也是如此（子元素左边与父元素左边在一起）;- 盒子垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻盒子的 margin。- BFC 就是页面上一个隔离的独立容器，容器里面的子元素不会影响外面的元素；- BFC 的区域不会与浮动的盒子重叠（浮动元素紧贴浮动元素）- 浮动元素，float 除 none 以外的值;
触发BFC的条件
qq_40212505的博客
08-23 853
具有浮动（即float不为none） 具有绝对定位或固定定位（position：absolute | fixed） display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible（一般设置overflow：hidden） 会触发BFC ...
BFC原理与应用：自适应两栏布局解析
"本文主要介绍了如何使用BFC(Block Formatting Contexts)实现自适应两栏布局，探讨了BFC的概念、触发条件以及其在布局中的应用。" BFC，全称Block Formatting Context，是Web页面布局中的一种概念，主要用于定义...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值