BFC的应用

最新推荐文章于 2024-08-30 15:10:39 发布
最新推荐文章于 2024-08-30 15:10:39 发布
阅读量81 收藏
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46578458/article/details/105282435
版权

BFC

块级格式化上下文

第一个应用 防止高度塌陷

父元素的高度不确定的时候 子元素有浮动 这时候在父元素上添加一个overflow:hidden;可以出发BFC

是根据BFC中 浮动元素也参与计算

第二个应用 解决margin上下间距的重叠

依据的是BFC
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置） 可以让两个元素处于不同的BFC中 这样就不会发生重叠

第三个应用 两栏自适应布局

依据BFC中 浮动元素不会和其他元素重叠
当有浮动元素是 可以上其他元素处于一个BFC中 这样不会发生重叠

三栏自适应布局
方法 1 BFC
2 margin
3 padding
4 定位

一个对前端瑟瑟发抖的小白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BFC的原理以及应用场景
rain_zhh的博客
10-03 648
BFC的原理以及应用场景 一.定义 BFC(Block Formattin Context) 直译过来就是块级格式化上下文，它是页面中一块独立渲染的区域,有一套渲染规则,只有Block-level box参与,也就是只有块级盒子参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部无关 FC(Formattin Context)是W3C CSS2.1规范中的一个概念,它是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元素如何定位,以及和其他元素的关系和相互作用,最常见的有
CSS中BFC的应用
本杰明的博客
02-20 1345
前言说起BFC，一些不熟悉的童鞋往往会有两种情况：1. 用了BFC但是不知道有这回事，2.请教过大佬听过BFC大名然后CV了一段overflow: hidden解决了问题然后不刨根问底，笔者曾经也是其中的一员。思维不清晰肿么办？问谷歌娘呗～看了好多文章，知道自己没有过目不忘的本事，还是觉得要自己动手写写，一来加深印象，二来方便日后追溯，故撰此文。
前端面试之BFC
weixin_34198797的博客
02-20 164
什么是BFC BFC(块格式化上下文): 是Web页面可视化渲染CSS的一部分, 是布局过程中生成块级盒子的区域。也是浮动元素与其他元素的交互限定区域。 简单理解就是具备BFC特性的元素, 就像被一个容器所包裹, 容器内的元素在布局上不会影响外面的元素。 BFC常见应用 解决普通文档流块元素的外边距折叠问题 <style> * { margin: 0; ...
前端开发中BFC特性及其应用
weixin_43384380的博客
06-03 372
这里写目录标题BFC规范触发BFC的条件具体BFC特性和应用如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 BFC规范 首先了解一下什么是BFC Formatting context(格式化上下文)是W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且
前端随笔之BFC及应用（清除浮动及两栏布局）
kekepengpeng97的博客
09-08 251
BFC(block formatting context)块级格式化上下文 它是一个独立的渲染空间，只有块级元素（block-level box）参与， 它规定了内部的块级元素如何布局，并且与这个区域外部毫不相干 怎么样才会触发BFC 1.根元素（html）及包含元素 2.float属性不为none 3.positi...
前端BFC规则
Kiri_To的博客
08-21 552
什么是BFC？ 首先要了解什么BFC： BFC 全称为 (Block Formatting Context) 块格式化上下文 它是一种功能，针对于 HTML文档 起作用，BFC 应该可以抽象成一个 独立的个体，就是正常的普通流布局规则，设置的样式是什么样的，就按正常的普通流布局的表现。 内部的子元素 不受外界的影响，外界的元素，也不受内部的元素的影响。各自独立生活在html这片空间下。 BFC触...
浅谈BFC及其应用
worm_IT的博客
06-09 2481
        说起页面的布局，不得不提一个容易忽略但是很重要的东西——BFC(block formatting context)，翻译的直接点就是块级格式化上下文，翻译的有意境点就是开辟自己的地盘。以下是我对BFC的一些理解，如你在阅读时发现有错误，为了避免误导其他读者，请及时联系我。一、什么是BFC        BFC是一个独立的渲染区域，只有block-level box参与，它规定了内部...
10分钟理解CSS BFC原理及其应用
09-27
BFC的应用场景广泛，比如清除浮动、解决外边距折叠问题、创建自适应两栏布局等。熟练掌握BFC原理能帮助开发者更好地控制页面元素的布局，提高页面设计的灵活性和可维护性。在实际开发中，合理利用BFC特性可以避免很...
bfc的详细介绍以及大总结
01-17
### BFC（Block Formatting Context）的详细介绍与大总结 #### 一、BFC的基本概念 BFC，全称为Block Formatting Context（块级格式化上下文），是CSS中一种特殊的渲染规则，它决定了内部元素如何布局以及与其他...
bfc 6种方法
xiaoma19941027的博客
09-24 458
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
BFC
小白向前冲！
06-05 9981
https://blog.csdn.net/liuliuliu_666/article/details/70847566 https://www.w3cplus.com/css/understanding-css-layout-block-formatting-context.html https://developer.mozilla.org/zh-CN/docs/Web/JavaScrip...
html中关于BFC的概念和应用场景
lanseguhui的博客
06-06 725
BFC概念和应用场景BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。 一、BFC是什么？ 　　在解释 BFC 是什么之前，需要先介绍 Box、Formatting（格式化） Context（上下文）==块级格式化上下文 的概念。 BFC(Block formatting context)直...
前端-什么是BFC？BFC布局规则、触发条件、应用场景
乌药ice
01-10 4315
什么是BFC？ BFC（Block Formatting Context）直译为“块级格式化范围”。它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 简单来说，BFC就是一个独立不干扰外界也不受外界干扰的盒子。 布局规则 内部的Box会在垂直方向，一个一个地布置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的Margin会发生重叠，也就是外边距塌陷。 每个元素的margin box的左边，
常见的解决bfc的方法
weixin_43553231的博客
03-24 2557
进阶篇—高级的css常见的问题# 标题 一.如何触发一个盒子的bfc： 1.//postion:absolute;----具体解释： postion:允许用户精确定义元素框出现的相对位置。可以是相对于它通常出现的位置，相对于其上级元素，相对于另一个元素，或者相对于浏览器视窗本身。 absolute: (1).当元素A的父对象设置了position属性，且position的属性值为absolute或...
HTML ＜template＞ 标签的基本技巧
ufrontend的博客
08-30 431
HTML中的标记是 Web 开发中一个功能强大但经常未得到充分利用的元素。它允许你定义可重复使用的内容，这些内容可以克隆并插入 DOM 中而无需最初渲染。此功能对于创建动态、交互式 Web 应用程序特别有用。在本文中，我们将探讨有效使用 标记的 10 个基本技巧，帮助你在项目中充分发挥其潜力。1. 了解 标记的基础知识 标记是一个 HTML 元素，它包含页面加载时不会渲染的客户端内容。
30分钟从零开始入门拿下 HTML
Y_1215的博客
08-27 1079
HTML(HyperTextMarkupLanguage),超⽂本标记语⾔.超⽂本:⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包 含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.标记语⾔:由标签构成的语⾔ HTML的标签都是提前定义好的,使⽤不同的标签,表⽰不同的内容.类似⻜书⽂档,Word⽂档如果选中⽂本,点击标题1,就会使⽤标题1的样式来显⽰⽂本,上述标题1就是⼀个"标签"我是⼀级标题我是⼆级标题
网页html版——在线查字典的一个web服务器
l22221的博客
08-27 1058
HTML是一种用于创建网页的标准标记语言。可以用dreamwave这个工具来写使用文本编辑器（如Notepad++、Sublime Text、Visual Studio Code等）创建一个新的文件，并将其保存为 .html 文件。
html快速入门
m0_52049533的博客
08-22 838
/
前端篇-html
最新发布
qq_60203955的博客
08-30 109
前端学习
BFC原理与应用：自适应两栏布局解析
"本文主要介绍了如何使用BFC(Block Formatting Contexts)实现自适应两栏布局，探讨了BFC的概念、触发条件以及其在布局中的应用。" BFC，全称Block Formatting Context，是Web页面布局中的一种概念，主要用于定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值