一天搞定CSS：BFC布局与普通文档流布局比较--15

最新推荐文章于 2024-01-03 20:52:19 发布
最新推荐文章于 2024-01-03 20:52:19 发布
阅读量1k 收藏 5
点赞数 1
分类专栏： 前端基础HTML5/CSS3 文章标签： css 布局 BFC 普通文档流布局 BFC布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_37107022/article/details/71634396
版权

BFC:Block Formatting Contexts–块级元素格式化上下文

1.BFC定义

它决定了块级元素如何对它的内容进行布局，以及与其它元素的关系和相互作用

关键词解释：
块级元素：父级（是一个块元素）

内容：子元素（是一个块元素）

其它元素：与内容同级别的兄弟元素

相互作用：BFC里的元素与外面的元素不会发生影响

2.BFC触发方式

这里写图片描述

2.BFC的布局规则

这里写图片描述

3.普通文档流布局规则

这里写图片描述

4.代码演示

<!DOCTYPE html>
<html>
    <
最低0.47元/天 解锁文章
Java仗剑走天涯
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中文档流概念+高度塌陷+bfc+浮动清除
preserveXing的博客
04-12 281
理解文档流的概念 浮动塌陷的案例
BFC机制与浮动定位脱离文档流
Ivana_zyf的博客
12-31 1373
BFC机制与浮动定位脱离文档流 BFC块格式化上下文 —-w3c规定的一种独立渲染区域 渲染流程基本上四个步骤： 1.计算CSS样式 2.构建Render Tree 3.Layout – 定位、大小，换行，（position, overflow等属性） 4.正式开始 脱离标准流的方式有三种——浮动、绝对定位、固定定位 脱离标准流之后定位的元素，会覆盖浮动的元素，故此
BFC、文档流、脱离文档流
qq_44681872的博客
02-04 1398
BFC BFC(Block Formatting Context),中文为块级格式化上下文。它 为元素提供一个独立的容器，在该容器中按照一定规则进行布局排列，容器内元素不会影响外部元素，外部元素不会影响内部元素。 触发BFC的情况 float不为none position为absolute或fixed overflow不为visible display为inline-block或table或flow-root 产生BFC的元素 display为block、list-item、table的元素 BFC可处
BFC（块级格式化上下文）
qq_43591348的博客
07-22 125
BFC（块级格式化上下文）： 用于布局块级盒子的一块渲染区域。 触发BFC的条件（满足其中之一即可） 根元素，即HTML元素； float的值不为none； overflow的值不为visible; display的值为inline-block,table-cell,table-caption; position的值为absolute或fixed； ...
BFC（Block Formatting Context）、盒模型、文档流和 Flex 布局
最新发布
xingchou00的博客
01-03 469
1.BFC（块级格式化上下文）：BFC 是一个独立的渲染区域，与外部区域无关。BFC 内的块级元素按照一定的规则进行排列和调整。BFC 具有以下特性：内部盒子在垂直方向上一个接一个放置。BFC 区域不会与浮动元素产生交集，而是紧贴浮动边缘。计算 BFC 高度时，浮动元素也参与计算。2.盒模型：盒模型是 CSS 中的一个基本概念，它描述了元素在页面上的布局和渲染方式。盒模型包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。
common-css-layout:圣杯布局&&双飞翼布局&&BFC布局
05-25
圣杯布局和双飞翼布局是解决复杂三列布局的经典方案，而BFC布局则是理解CSS盒模型和布局流的关键。熟悉并掌握这些布局模式，对于提升前端开发者的布局能力大有裨益，尤其在处理各种响应式和自适应设计时显得尤为重要...
CSS布局基础BFC
09-27
总结BFC，全称为Block Formatting Context，是CSS布局中的一个重要概念，它定义了一个独立的渲染区域，其中的元素遵循特定的排列规则。BFC可以通过多种方式触发，如浮动、绝对定位、overflow不为visible的块级元素等...
CSS使用BFC规则布局引发外层div包裹内层div的处理方法
12-13
它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个div内部，我们用float和margin布局元素。 BFC布局规则：1.内部的Box会在垂直方向，一个...
前端基础——文档流与BFC
09-26
在前端开发中，理解和掌握文档流（Document Flow）与块级格式化上下文（Block Formatting Context，简称BFC）是构建网页布局的基础。这两个概念对于布局的控制、元素的定位以及盒模型的理解至关重要。 首先，我们来...
带你彻底弄清BFC
qq_52784066的博客
04-14 810
文章目录一.什么是BFC1.Box2.Formatting Context3.文档流二.怎么开启BFC三.BFC用于解决什么问题 这周准备静下来处理一些积攒的问题 加深之前的理解 白桃分析水瓶座这周的学习运势哦 一.什么是BFC BFC是Box Formatting Context的缩写 这么翻译过来就是块级格式化上下文 总的来说 BFC就是一个上下文 其中存放了开启了BFC的元素 这些元素在其中的布局不会影响这个上下文之外的元素 接下来为了理解地更彻底一些 我们来看一下所涉及的几个概念 1.Bo
BFC以及文档流
weixin_30362801的博客
05-30 167
在一个文档流中，盒子模型元素的位置会互相影响。 当一个BFC出现在文档流中时，BFC内部的盒子模型元素同BFC外部的元素之间的位置不会互相影响。 相当于BFC重新创建了一个文档流。 举例： 一个文档流中出现了一个float元素，float元素会影响后续出现的inline或者inline-block的元素显示位置，而float元素内部的元素显示，同外部元素没有任何关系。 转载于:...
css布局-文档流（Normal Flow）、BFC
qq_38367703的博客
03-04 438
一、常规流布局/文档流布局（Normal Flow）（相对于盒子模型讲的） 将窗体自上而下分成一行一行，块级元素从上至下、 行内元素在每行中按从左至右的依次排放元素。 二、脱离文档流 定义： 元素脱离常规流之后，将不再在常规流中占据空间，而是处于浮动状态（可以理解为漂浮在常规流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在常规流中的其他元素将忽略该元素并填补其原先的空间。 脱离文档流(Normal Flow）的方式 a.浮动（float） .border1 div
BFC布局与IFC布局以及普通文档流布局
泠泠似水
12-17 253
BFC布局 BFC(Block Formatting Context)块级格式化上下文。 它是一个独立的渲染区域。 它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系。 块级元素：父级（是一个块元素） 内容：子元素（是一个块元素） 其他元素：与内容同级别的兄弟元素 相互作用：BFC里的元素与外面的元素不会发生影响 那么，触发条件或者说哪些元素会生成BFC，满足下列条件之一就可触发BFC 【1】根元素 　　【2】float的值不为none 　　【3】ove
BFC，包含块，文档流，浮动，定位是个啥关系---CSS视觉格式化模型
weixin_33682719的博客
12-30 258
CSS视觉格式化模型 浏览器在解析渲染我们所写的html内容，顺序渲染（普通文档流）。 <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div...
BFC到底是什么？IFC、GFC、FFC？
lscheng的博客
08-01 296
1、BFC的定义 我们常说的文档流分为普通流、浮动流与定位流三种。 FC(formatting context格式化上下文)，指的是一块渲染区域，依靠渲染规则，决定其子元素如何布局及与其他元素的关系和作用。 FC分为BFC、IFC、GFC和FFC，其中BFC(block formatting context)块级格式化上下文 BFC可以简单的理解为某个元素的一个css属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素对内部元素和外部元素会表现出一些特性，这就是BFC。 2、关于BFC、IFC、G
什么是BFC
CSDN_go_die的博客
11-19 183
参考B站大佬视频：带你用最简单的方式理解最全面的BFC_哔哩哔哩_bilibili BFC的定义： 1.BFC属于普通流（即实行行内元素水平排开，块级元素自占一行的规则） 2.BFC可以看作元素的一种属性，这个元素内部的子元素的布局不会影响到外面的元素 如何触发BFC： 以上7点其中任意一个属性都可以触发BFC BFC的优点： 1.避免外边距重叠 比如相邻的两个块元素A,B margin 都是10px,那么一般来说它们的间距是10px（取两个margin的最大值），如果把AB分别放在有.
浅谈CSS BFC及其应用
筱葭的博客
03-06 790
Block Formatting Context，即块级格式上下文。 创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。 1、BFC的特性 （1）内部的Box会在垂直方向，从顶部开始一个接一个地放置。 （2）B
BFC理解
weixin_44164982的博客
07-18 103
BFC理解 1、BFC布局与普通文档流布局区别 普通文档流布局规则 1.浮动的元素是不会被父级计算高度 2.非浮动元素会覆盖浮动元素的位置 3.margin会传递给父级 4.两个相邻元素上下margin会重叠 BFC布局规则 1.浮动的元素会被父级计算高度（父级触发了BFC） 2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC） 3.margin不会传递给父级（父级触发了BFC） 4.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC） 2、BFC解决
2022前端面试必备：BFC、CSS布局与渐进增强详解
BFC是一种独立的布局环境，它让内部元素不受外部元素影响，并保持自身的布局规则。触发BFC的方式包括设置元素的`float`为`left`或`right`，`overflow`不为`visible`，`display`为`inline-block`、`table-cell`或`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值