前端BFC

已于 2022-09-29 14:35:47 修改
阅读量53 收藏
点赞数
文章标签： 前端 html
于 2022-09-29 14:32:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63835766/article/details/127106348
版权
BFC（Block Formatting Context）是CSS布局中的一种概念，它定义了块级元素如何在其区域内布局。BFC区域不包含其子元素的子元素，且BFC元素间相互隔离。通过理解和利用BFC，可以解决如消除margin重叠、消除浮动元素导致的塌陷问题，以及实现灵活的两栏自适应布局等关键问题。在前端开发中，掌握BFC对于提升页面布局控制能力至关重要。
摘要由CSDN通过智能技术生成

bfc概念："块级格式化上下文"，bfc区域只包括其子元素，不包括bfc子元素的子元素。bfc元素相互隔离，互不影响

bfc作用：

1.消除margin重叠

2.消除浮动塌陷

3.实现两栏自适应布局

m0_63835766
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端bfc的介绍与使用
02-23
关于BFC的介绍与使用 这篇文章是我对BFC的理解及总结 带你们了解bfc的布局规则，使用方法，触发条件等内容，理解简单。
zuoxiaobai#zuo11.com#web前端BFC，什么是BFC1
07-25
字面意思很难理解，我们先来看几个例子",虽然做前端好几年了，但只是听说个这个名词，一直不清楚具体是什么意思，今天来研究下BFC相关示例BFC是 Block Fo
前端 BFC
青山不改，绿水长流。
09-20 192
它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。MDN给出的解释是：BFC是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠。BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签。BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列。
前端——BFC
qq_64536562的博客
07-12 801
1.BFC是 Block Formatting Context(块级格式上下文)，可以理解成元素的一个“特异功能”。2.该"特异功能"，在默认的情况下处于关闭状态;当元素满足了某些条件后，该“特异功能”被激活。3.所谓激活“特异功能”，专业点说就是:该元素创建了 BFC(又称:开启了 BFC)。
前端BFC规则
Kiri_To的博客
08-21 552
什么是BFC？ 首先要了解什么BFC： BFC 全称为 (Block Formatting Context) 块格式化上下文 它是一种功能，针对于 HTML文档 起作用，BFC 应该可以抽象成一个 独立的个体，就是正常的普通流布局规则，设置的样式是什么样的，就按正常的普通流布局的表现。 内部的子元素 不受外界的影响，外界的元素，也不受内部的元素的影响。各自独立生活在html这片空间下。 BFC触...
前端知识点之BFC
PrototypeOne的博客
04-24 504
BFC 什么是BFC BFC：Block formatting context，中文块级格式化上下文。 它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。 BFC的布局规则 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由m
前端基础——BFC
qq_41721660的博客
04-09 540
FC 概念 FC(Formating context)格式化上下文，是css2.1提出的一个视觉渲染的概念。它是页面中一块渲染的区域，并且有一套自己的渲染规则，它决定了其子元素如何排列，以及和其他元素之间的相互关系 BFC BFC--block formating context：块级格式化上下文，BFC是页面中的一个块级渲染区域。 概念： 指的是页面中的一个标签，不一定是块级标签。要成为BFC，有指定的满足条件。BFC有自己的排列规范，决定了BFC区域的子元素如何排列，以及与其他元素之间的相互关系
前端BFC布局学习
weixin_34194317的博客
07-16 115
BFC，全称为(Block formatting context)。按照我的理解是我们在某一条件下会触发BFC布局，会产生一定的效果。 Block Formatting Contexts翻译为：块级元素格式化上下文。它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互作用。 其中块级元素可以理解为父级元素，内容即是子元素，子...
前端之BFC说明
weixin_45054381的博客
12-15 833
1、可以利用BFC解决两个相邻元素的上下margin重叠问题；2、可以利用BFC解决高度塌陷问题；3、可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）。圣杯布局。
浅谈什么是前端BFC
.伊泽瑞尔
05-18 2018
BFC(Block Formatting Context)的英文缩写简称，block可以理解为一个简单的盒模型， Formatting Context则为block的上下文渲染环境。其作用是使内部元素的布局不受外部元素影响。
# 前端：浅谈BFC
weixin_45899890的博客
10-27 472
块级格式上下文 (Block formatting context，简称BFC) 就是 Formatting context 的中最常见的一种。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的 Block-level Box 如何布局，并且与这个区域的外部毫不相干。
前端基础——文档流与BFC
09-26
在前端开发中，理解和掌握文档流（Document Flow）与块级格式化上下文（Block Formatting Context，简称BFC）是构建网页布局的基础。这两个概念对于布局的控制、元素的定位以及盒模型的理解至关重要。 首先，我们来...
前端就业1
08-03
- CSS3的新特性，如盒子模型的调整、浮动、定位、BFC（块格式化上下文）的理解与应用。 - 学习CSS布局技术，如Flexbox和Grid布局，以实现各种复杂页面布局。 - 掌握CSS3的边框、圆角、背景、渐变、画三角形、扇形...
HTML-bfc初探
08-03
HTML中的BFC（Block ...掌握BFC对于前端开发者来说非常重要，它能帮助我们解决很多布局问题，提升网页设计的灵活性和可控性。理解BFC的工作原理，并熟练运用到实际项目中，将有助于提升网页的布局效率和质量。
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 631
ASP.NET Core Web API 使用Autofac框架
JAVA-WEB资源配置
最新发布
caryeko的专栏
08-15 123
用JAVA进行编写WEB项目时，我们一般需要对WEB进行统一配置，例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。
vue3使用pnpm运行项目但是运行不起来
一个努力不被优化的程序员
08-12 196
重新创建项目，将老项目的package.json，vite.config.ts，src等文件拖拽替换。删除node_modules重新下：文字编译乱码，utf-8可能解析处理问题。（如果哪位知道为什么会这样或者怎么解决麻烦留言下）运行项目的时候发现根本运行不起来了。删除node_modules重新下。尝试过创建.npmr文件。创建.npmr：不管用。
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 756
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
前端面试必知：CSS盒模型、BFC与层叠上下文详解
前端面试复习篇是针对准备前端开发者求职面试的重要参考资料，该部分主要涵盖了CSS基础知识及其在实际开发中的应用。以下是一些关键知识点的详细解释： 1. **CSS盒模型**： CSS盒模型定义了网页元素在渲染时的尺寸...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值