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

最新推荐文章于 2025-03-06 17:20:31 发布
最新推荐文章于 2025-03-06 17:20:31 发布
阅读量1.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）布局和普通文档流布局的区别。介绍了BFC的定义，触发条件，布局规则，并通过代码演示和实例分析了它们在实际应用中的表现。同时，针对IE不支持BFC的问题，提供了Layout布局的解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

1.BFC定义

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

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

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

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

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

2.BFC触发方式

这里写图片描述

2.BFC的布局规则

这里写图片描述

3.普通文档流布局规则

这里写图片描述

4.代码演示

<!DOCTYPE html>
<html>
    <
最低0.47元/天 解锁文章
BFC机制与浮动定位脱离文档流
Ivana_zyf的博客
12-31 1449
BFC机制与浮动定位脱离文档流 BFC块格式化上下文 —-w3c规定的一种独立渲染区域 渲染流程基本上四个步骤： 1.计算CSS样式 2.构建Render Tree 3.Layout – 定位、大小，换行，（position, overflow等属性） 4.正式开始 脱离标准流的方式有三种——浮动、绝对定位、固定定位 脱离标准流之后定位的元素，会覆盖浮动的元素，故此
CSS布局基础BFC
09-27
总结BFC，全称为Block Formatting Context，是CSS布局中的一个重要概念，它定义了一个独立的渲染区域，其中的元素遵循特定的排列规则。BFC可以通过多种方式触发，如浮动、绝对定位、overflow不为visible的块级元素等...
BFC:什么是BFC？BFC作用？如何触发BFC？BFC应用场景
最新发布
YSbnhoffer的博客
03-06 943
BFC:什么是BFC？BFC作用？如何触发BFC？BFC应用场景
BFC（块级格式化上下文）
qq_43591348的博客
07-22 181
BFC（块级格式化上下文）： 用于布局块级盒子的一块渲染区域。 触发BFC的条件（满足其中之一即可） 根元素，即HTML元素； float的值不为none； overflow的值不为visible; display的值为inline-block,table-cell,table-caption; position的值为absolute或fixed； ...
BFC以及文档流
weixin_30362801的博客
05-30 209
在一个文档流中，盒子模型元素的位置会互相影响。 当一个BFC出现在文档流中时，BFC内部的盒子模型元素同BFC外部的元素之间的位置不会互相影响。 相当于BFC重新创建了一个文档流。 举例： 一个文档流中出现了一个float元素，float元素会影响后续出现的inline或者inline-block的元素显示位置，而float元素内部的元素显示，同外部元素没有任何关系。 转载于:...
css布局-文档流（Normal Flow）、BFC
qq_38367703的博客
03-04 489
一、常规流布局/文档流布局（Normal Flow）（相对于盒子模型讲的） 将窗体自上而下分成一行一行，块级元素从上至下、 行内元素在每行中按从左至右的依次排放元素。 二、脱离文档流 定义： 元素脱离常规流之后，将不再在常规流中占据空间，而是处于浮动状态（可以理解为漂浮在常规流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在常规流中的其他元素将忽略该元素并填补其原先的空间。 脱离文档流(Normal Flow）的方式 a.浮动（float） .border1 div
CSS三栏布局6法：浮动与BFC策略详解
本文主要探讨了CSS中的经典三栏布局方案，共介绍六种不同的实现方法。三栏布局是网页设计中常见的需求，它要求左边和右边的栏位固定宽度，而中间栏则能够自适应内容。以下是详细介绍的两种方法： 1. **浮动布局...
html5+css3之CSS中的布局与Header的实现
01-19
Hybrid中Header的实现往往是一个难点，主要原因是同一套接口，要保证H5站点与native处于不一样的环境调用相同的接口，完成不同的功能 ③ 若是Hybrid中采用native提供的头会导致mask不能全屏遮盖，并且Header定制会变...
BFC（Block Formatting Context）、盒模型、文档流和 Flex 布局
xingchou00的博客
01-03 566
1.BFC（块级格式化上下文）：BFC 是一个独立的渲染区域，与外部区域无关。BFC 内的块级元素按照一定的规则进行排列和调整。BFC 具有以下特性：内部盒子在垂直方向上一个接一个放置。BFC 区域不会与浮动元素产生交集，而是紧贴浮动边缘。计算 BFC 高度时，浮动元素也参与计算。2.盒模型：盒模型是 CSS 中的一个基本概念，它描述了元素在页面上的布局和渲染方式。盒模型包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。
BFC布局与IFC布局以及普通文档流布局
泠泠似水
12-17 310
BFC布局 BFC(Block Formatting Context)块级格式化上下文。 它是一个独立的渲染区域。 它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系。 块级元素：父级（是一个块元素） 内容：子元素（是一个块元素） 其他元素：与内容同级别的兄弟元素 相互作用：BFC里的元素与外面的元素不会发生影响 那么，触发条件或者说哪些元素会生成BFC，满足下列条件之一就可触发BFC 【1】根元素 　　【2】float的值不为none 　　【3】ove
常见的几种页面布局、BFC以及处理过程中遇到的高度塌陷问题
01-20
说在前面 文档流 文档流包括浮动流、定位流以及普通的标准流。 一、常见的几种页面布局 静态布局 定位布局 流式布局 弹性布局 自适应布局 响应式布局 圣杯、双飞翼、栅格布局 1、静态布局 特点： 传统的网页布局形式，页面上的所有元素的尺寸均使用px（像素）作为单位，当屏幕缩小的时候，会出现滚动条 优点 ：代码简单，编写容易，且无兼容性问题 缺点：无法根据不同的屏幕尺寸做出相应的表现 2、定位布局 特点： 使用 position 属性定义定位类型，并指定元素位置来布局 position部分属性：static、fixed、relative、absolute、sticky 堆叠顺序 使用 z-ind
BFC的布局规则
Startwithablank的博客
03-01 5449
在起初我们做网页应该还没彻底了解，到底是怎么进行一个布局，在我们头脑中布局应该分为三部分，头，中，尾三部分，这样理解也没有错，但是我们所有的布局都是会遵循BFC布局为标准。 今天来展示一下BFC布局的详细情况： BFC是怎样形成的 BFC的布局规则： 1、内部的Box会在垂直方向, 一个接-个地放置。 2、Box垂直方向的距离由margin决定。属于同-一个BFC的两个相邻Box的ma...
BFC 触发规则: 解决高度塌陷，外边距重叠，用于左右布局，双飞翼布局
qq_60839348的博客
11-21 823
BFC 布局规则，触发规则，解决高度塌陷，外边距重叠，用于左右布局，双飞翼布局
被忽略的BFC
罗小黑
08-20 294
什么是BFC BFC（Block formatting context）译为“格式快上下文”，是一个独立渲染区域，规定了内部的子元素如何布局，并且与这个区域外部的关系。 什么情况下会产生BFC 根元素（注意：这里必须手动设置，默认不触发BFC） float属性不为none position为absolute或fixed display为inline-block、table-cell、tab...
常用布局之BFC布局
问白的博客
02-24 4913
上一篇文章写了常用并且很强大的弹性布局，这次来说下另一种布局方式BFC布局BFC(Block Formatting Contexts -- 块格式化布局)布局是需要其他属性值设置为某些特定的值方可触发BFC布局，也就是说这个bfc不像弹性布局一样，只要申明display:flex就可以申明一个flex的容器,bfc有一些特定的属性值，申明之后自动回触发bfc，能触发bfc布局的属性如下：float...
什么是BFC？BFC的原理是什么？BFC的应用
tyxjolin的专栏
03-31 1321
在上面的代码中，我们首先使用clearfix hack来清除子元素的浮动，然后将父元素的overflow属性设置为hidden，以生成一个BFC来避免子元素的浮动影响到父元素的布局。在上面的代码中，我们将左栏设置为浮动元素，然后将右栏的overflow属性设置为hidden，以创建一个BFC，从而避免了左栏的浮动影响到右栏的布局。在BFC中，浮动元素会被包裹在BFC的内部，不会影响到BFC外部的元素的布局。在BFC中，浮动元素会被包裹在BFC的内部，不会影响到BFC外部的元素的布局。
BFC知识总结
qq_41716992的博客
02-03 545
BFC的概念以及应用
【前端布局技术】BFC、IFC详解
cannotbecounted的博客
06-27 641
BFC是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。这两个盒子，都拥有 100 的外边距，但实际上两个盒子在垂直方向上的距离只有 100(本来应该是 200)，这就是。，BFC是一块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会。因此，实际上可以将 BFC 视作一个箱子，箱子里面的元素不会与箱子外面的元素产生作用。因为此时父元素是一个独立的区域，其中的任何操作，都不会影响到外部。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值