从BFC到浮动到定位

最新推荐文章于 2025-12-18 17:13:23 发布
原创 最新推荐文章于 2025-12-18 17:13:23 发布 · 130 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #BFC的一些理解

本文深入解析BFC（Block Formatting Context）布局机制，探讨其在网页布局中的应用与特性。包括BFC如何影响内部元素的布局，float元素如何参与BFC高度计算，以及不同BFC区域之间的重叠问题。

详解
一个块级BFC的内部当然有普通的盒子，其中普通的盒子内部又有BFC块。
注意，是folat的高度参与BFC的计高度算，不代表所有BFC都能参与计算。

两个BFC区域不会重叠。当然说的是相邻的BFC

BFC机制与浮动定位脱离文档流
Ivana_zyf的博客
12-31 1482
BFC机制与浮动定位脱离文档流 BFC块格式化上下文 —-w3c规定的一种独立渲染区域 渲染流程基本上四个步骤： 1.计算CSS样式 2.构建Render Tree 3.Layout – 定位、大小，换行，（position, overflow等属性） 4.正式开始 脱离标准流的方式有三种——浮动、绝对定位、固定定位 脱离标准流之后定位的元素，会覆盖浮动的元素，故此
CSS之浮动/BFC/清除浮动（十二）
全粘小谭的博客
10-06 518
该文先讲解了CSS布局的几种策略，以及正常布局流是什么，然后逐步讲解浮动的由来，本质，如何产生，以及特性，随后讲解BFC规范，如何创建BFC，BFC的作用，最后列出清除浮动的几种方法。
html中浮动到固定位置,CSS浮动与定位详细解析
weixin_30278943的博客
06-05 2154
1.文档流文档即一个网页，文档流处在网页的最底层，它表示的是页面中的一个位置，我们所创建的元素默认都处在文档流当中。通过浮动和定位可以脱离文档流。元素在文档流中的特点块元素：1.块元素会在文档流中独占一行，块元素会至上而下排列。2.块元素在文档流中的宽度默认值为auto(自动)，即为父元素的100%。3.块元素在文档流中的高度默认为内容高度，即被内容撑开，没有内容就为0，有内容的话，内容多少它就多...
浮动与BFC
langmanboy的博客
04-07 575
浮动 1. 什么是浮动？ 浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素，其周围的元素也会重新排列 浮动属性： none：默认值。元素不浮动，元素会按照标准文档流显示位置 left：元素向左浮动 right：元素向右浮动 inherit：规定应该从父元素继承 float 属性的值 float: none|left|right; 2. 什么是标准文档流？ 标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从
BFC与浮动
apzlm9110的博客
03-12 591
一、BFC的含义 BFC(block formatting contexts） 块级元素格式化上下文，它决定了块级元素如何对它的内容进行布局，以及与其它元素的关系和相互作用。 块级元素：父级（是一个块元素） 内容：子元素（是一个块元素） 其它元素：与内容同级别的兄弟元素 相互作用：BFC里的元素与外面的元素不会发生影响 二、浮动触发条件 1.float的值不为none...
BFC 清除浮动详解
dlf_0610的博客
07-09 534
一、什么是BFC BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。 中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影
定位，浮动，BFC
bug_caicai的博客
10-17 365
margin,padding,定位，元素分类，浮动，BFC
BFC和清除浮动的详细说明
viulu5824的博客
12-11 1906
BFC和清除浮动的详细说明
BFC概念和清除浮动
会一点前端、会一点Java、会一点Python
07-16 1841
一、BFC概念 BFC 即 Block Formatting Contexts (块级格式化上下文)，是W3C CSS2.1规范中的一个概念，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的的一些特性。 二、BFC生成条件 只要元素满足下面任一条件即可触发B...
定位+浮动
wangxin1029的博客
11-23 354
父相子绝
Web-前端html+css从入门到精通 133. BFC规范（下）.zip
05-23
本篇将深入探讨BFC规范，帮助初学者从入门到精通，理解并掌握这一关键知识点。 首先，BFC是一个独立的布局区域，它有自己的渲染规则，比如内部元素如何排列、如何避免浮动元素的影响等。在BFC中，元素按照一定的...
Web-前端html+css从入门到精通 132. BFC规范（上）.zip
05-23
本篇将深入探讨BFC规范，帮助初学者从入门到精通。 BFC全称为Block Formatting Context，它是由W3C CSS2.1规范定义的一种渲染规则，用于确定元素如何在其内部以及与其他元素相互作用进行布局。创建BFC的元素会形成...
PaperStudio：WYSIWYG文档的Web实现——从CSS Print到客户端PDF生成的技术解析
xinyu_Jina的博客
12-15 647
通过精确控制页面布局、利用 SVG/Canvas 进行高保真渲染，并结合客户端库实现安全的 PDF 导出，这类工具成功地将传统的桌面级排版功能带到了 Web 平台。它将复杂的 CSS Print 规则和 PDF 生成逻辑，封装在了一个用户友好的交互界面中。将 CSS Print 规范、矢量渲染和客户端 PDF 生成技术结合，使得 Web 应用具备了媲美桌面级软件的文档处理能力。等客户端库，在不依赖后端服务器的情况下，将动态生成的 DOM 结构安全、高效地转换为高质量的 PDF 文档。
tailwindcss：安装避坑，从 0 到项目跑通
qq_45796592的博客
12-17 1000
本文详细介绍了TailwindCSS v3.4.x的安装配置流程及优化技巧。首先说明了官方文档在实际操作中可能遇到的问题，强调了核心依赖tailwindcss、postcss和autoprefixer的重要性。接着详细讲解了配置文件的生成和修改方法，包括自定义颜色配置和效果验证。文章还分享了优化方案，提供了一个cs工具方法来提升类名编写的可读性。最后推荐了VSCode插件TailwindCSS IntelliSense来增强开发体验。
CSS mix-blend-mode 实现元素融合效果
小小•愿望的博客
12-17 661
CSS的mix-blend-mode属性可实现元素内容与背景的颜色混合，提供多种混合模式如multiply（正片叠底）、screen（滤色）、difference（差值）等，类似Photoshop图层效果。其中difference模式能根据背景色自动调整文字颜色，如白色文字在黑色背景保持白色，在白色背景变为黑色，解决文字与背景色冲突问题。该属性兼容现代浏览器，适用于动态色彩适配场景，示例展示了不同背景色下文字自动反色的效果。
[Web自动化] CSS基础概念和介绍
知智
12-15 308
CSS（层叠样式表）是控制网页样式的语言，能将网页内容与表现分离。它具有样式丰富、层叠性和继承性等特点，可通过内嵌式、外联式和行内式三种方式引入HTML文档。CSS基础选择器包括标签选择器、类选择器、ID选择器和通配符选择器，分别用于选择HTML元素、类属性元素、ID属性元素和所有元素。这些特性使CSS成为网页美化和布局的核心技术。
html+css基础：07、css2的复合选择器_伪类选择器(概念、动态伪类、结构伪类(核心)、否定伪类、UI伪类、目标伪类、语言伪类)及伪元素选择器
狮子座的男孩
12-15 613
本文介绍了CSS中多种伪类选择器的概念和应用。主要包括：1）伪类选择器的基本概念，通过a:link和a:visited示例说明元素特殊状态的样式控制；2）动态伪类选择器，展示链接在不同状态（未访问、悬停、激活、已访问）下的样式变化；3）结构伪类选择器，详细解析first-child、last-child、nth-child等选择器的使用方法和效果，包括按兄弟元素和同类型兄弟元素计算的不同应用场景。通过多个HTML结构和对应的CSS样式示例，直观展示了各类伪类选择器的实际应用效果。
Vue 3 的魔法：用 v-bind() 让 CSS 爱上 TypeScript 常量
最新发布
ttod的博客
12-18 768
Vue 3 的魔法：用 v-bind() 让 CSS 爱上 TypeScript 常量
CSS容器查询：让组件学会“见机行事“的魔法
ttod的博客
12-18 484
CSS容器查询：让组件学会"见机行事"的魔法
浮动与定位详解：CSS布局关键
2. 使用绝对定位时，元素将从文档流中移除，可能会影响到其他元素的布局。 3. 固定定位常用于创建固定导航栏等，但需注意在小屏幕设备上的适配问题。 在实际项目中，根据需求灵活运用浮动、定位以及清除浮动的策略...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值