CSS中的BFC和IFC的用法实例分析

最新推荐文章于 2025-11-24 23:20:58 发布
最新推荐文章于 2025-11-24 23:20:58 发布
阅读量115 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： css 前端 Css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/WbhsOcaml/article/details/133366111
Css 专栏收录该内容
106 篇文章 ¥59.90 ¥99.00
订阅专栏
本文深入探讨CSS中的BFC和IFC概念，通过实例解析它们在元素布局和渲染中的作用。BFC用于解决浮动元素导致的高度塌陷问题，而IFC则助力内联元素的水平对齐。理解并善用这两个概念，能有效提升页面布局控制能力。

在CSS中，BFC（块级格式化上下文）和IFC（内联格式化上下文）是两个重要的概念，它们可以帮助我们更好地控制元素的布局和渲染。本文将通过实例分析BFC和IFC的用法，以及相应的源代码示例。

1. BFC（块级格式化上下文）

BFC是块级元素的一个渲染环境，它决定了内部元素如何布局，并且具有一些特定的行为和属性。BFC的创建方式有多种，比如使用浮动、绝对定位、设置display为inline-block等。

用法实例：

下面是一个使用BFC解决浮动元素造成的高度塌陷问题的示例：

<!DOCTYPE html>
<html>
了解本专栏 订阅专栏 解锁全文
【白嫖党】如何把前端学好？看完这篇，直呼：太强了！（历经半个月之作）
超逸の学习技术博客
04-04 2万+
很少有文章做到将知识形成一个体系，于是需要翻阅很多资料，但这篇文章做到了！共34815字数。
HTML5andCSS3面试题大全
donglize521521的博客
03-08 6205
文章目录1.CSS引入(1)有哪些引入方式？通过link和@import引入有什么区别？（* ）(2)Style 标签写在 body 后和 body 前有什么区别？(3)什么是 FOUC(Flash of Unstyled Content)？如何来避免 FOUC2.CSS选择器(1) CSS选择器种类(2)CSS选择器的优先级3.CSS伪类和伪元素4.CSS盒模型4.有哪些方式（CSS）可以隐藏页面元素？4.**em\px\rem区别？****5.块级元素水平居中的方法？** 1.CSS引入 (1)有哪些引
CSS3中相关的笔记
qq_40755047的博客
05-11 342
CSS3中相关的笔记 (一)结构伪类选择器 常见的结构伪类选择器： :first-child选取首个子元素 :last-child选取最后一个子元素 :nth-child(n)匹配属于父元素的地n个子元素 n的值，0.1.2.3… 匹配偶数位置的子元素 :nth-child(even)或:nth-child(2n) 匹配奇数位置的子元素:nth-child(odd) 或 :nth-child(...
HTML和CSS
sinat_43082914的博客
06-03 2754
HTML+css的学习笔记，基础知识整理
带你彻底弄清BFC
qq_52784066的博客
04-14 1231
文章目录一.什么是BFC1.Box2.Formatting Context3.文档流二.怎么开启BFC三.BFC用于解决什么问题 这周准备静下来处理一些积攒的问题 加深之前的理解 白桃分析水瓶座这周的学习运势哦 一.什么是BFC BFC是Box Formatting Context的缩写 这么翻译过来就是块级格式化上下文 总的来说 BFC就是一个上下文 其中存放了开启了BFC的元素 这些元素在其中的布局不会影响这个上下文之外的元素 接下来为了理解地更彻底一些 我们来看一下所涉及的几个概念 1.Bo
面试题CSS篇（一）
weixin_43526403的博客
03-01 3225
css面试题，自用
CSS面试题
qq_40055200的博客
11-11 4703
1.介绍一下标准的css的盒子模型？与低版本的IE盒子模型有什么不同？(重要) 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本的IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 标准表型指的是设置box-sizing为content-box的盒子模型，一般width,height指的是content的宽高。IE盒模型指的是box-sizing为border-box的盒子。宽高的计算是cont.
CSS现状和如何学习
淘系技术
01-11 1492
导读：在2020年岁末有幸和一群优秀大学生在一起聊CSS相关的话题，感到非常的荣幸！在此非常感谢平台（阿里巴巴集团.前端练习生计划）给我这样的机会，同时也要非常感谢好友 裕波，墨苒对我的...
html+css+js基础问答
qq_43751465的博客
08-26 5820
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
前端基础篇之 CSS 世界
qq_45768871的博客
10-15 1282
前端基础篇之 CSS 世界 基本概念 这些基本概念有些可能不易理解但却都很重要，如果看完还是很不理解的话需要自己谷歌或百度，网上关于这些概念的文章不少。 流 “流”又叫文档流，是 css 的一种基本定位和布局机制。流是 html 的一种抽象概念，暗喻这种排列布局方式好像水流一样自然自动。“流体布局”是 html 默认的布局机制，如你写的 html 不用 css，默认自上而下（块级元素如div）从左到右（内联元素如span）堆砌的布局方式。 块级元素和内联元素 这个大家肯定都知道。 块级元素是指单独撑满一行
-CSS-笔记-
April_Aimer的博客
02-07 2593
目标: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程 从HTML被发明开...
面试相关精选
qq_36080901的博客
10-22 1080
DTD（ Document Type Definition 文档类型定义）是一组机器可读的规则，它们定义 XML或 HTML 的特定版本中所有允许元素及它们的属性和层次关系的定义。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式（工作模式）。定义： 一个行内元素只占据它对应标签的边框所包含的空间。
【前端收藏】前端小作文-前端八股文知识总结（超万字超详细）持续更新
天天打码-16年老码农
02-04 2288
渲染引擎(Layout Engine或Rendering Engine)和js引擎渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
网页开发，在线%新版本旅游管理%系统，基于eclipse,html,css,jquery,servlet,jsp,mysql数据库
Strategic__的博客
11-24 622
在帮助客户修改这个在线旅游管理系统Demo时，从需求分析到上线迭代，踩了不少坑也攒了些经验。用Eclipse搭框架，HTML+CSS 搞前端页面，jQuery优化交互，Servlet 和 JSP 做后端处理，再配上MySQL存数据，整套下来也算顺顺当当。开发时候关键是多测多改，用户体验这块不能偷懒。现在系统功能稳定，既能满足基础管理需求，也支持定制开发。
前端性能优化之CSS篇
程序员小寒的博客
11-23 739
当涉及到网站的性能优化时，CSS 的优化是一个非常重要的方面。如果你的 CSS 太复杂，那么你的网站可能会像一个慢吞吞的乌龟一样缓慢地加载和渲染，影响用户的留存网站的转化率以及网站的体验和传播等，所以对于 CSS 优化还是非常需要的，本文将介绍一些 CSS 性能优化的技巧，帮助你在编写 CSS 代码时提高性能。本文主要通过CSS 加载性能优化CSS 选择器性能优化CSS 属性性能优化CSS 动画性能优化和CSS 渲染性能优化这些方向介绍了 CSS 的性能优化技巧。
网页开发，在线%旧版本旅游管理%系统，基于eclipse,html,css,jquery,servlet,jsp,mysql数据库
Strategic__的博客
11-24 283
界面用HTML搭页面框架，再用CSS调样式，总在布局对齐上卡壳，最后靠jQuery写了些动态效果，页面才活起来。后端咱们用Servlet处理请求时，毕竟有点老了项目总遇到参数传递的坑，调试半天才发现是请求方式没对应上。连接MySQL数据库时，还踩过字段类型不匹配的雷，改了好几次表结构才通。整个过程虽然常加班改bug，但看着查询景点、预订订单这些功能跑通，特别有成就感。也明白做开发得细心，前后端衔接、数据交互每一步都不能马虎，不然一点小问题就可能让整个系统卡壳。
CSS svg
xiangxiongfly
11-23 656
SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形，由 W3C 指定，支持无损缩放、交互性和动态效果。特点：https://www.iconfont.cn/ SVG图标必须包裹在 标签内。结构：获取svg描边的长度：在 svg 的 path 上定义id，通过该 id 在控制台执行JavaScript代码：id名.getTotalLength()
低版本浏览器兼容方案：IE11 适配 ES6 语法与 CSS 新特性
最新发布
fruge365的博客
11-24 981
低版本浏览器兼容方案：IE11 适配 ES6 语法与 CSS 新特性
html css js网页制作成品——html+css+js5 页 jk制服附源码
卡拉米
11-21 899
本文介绍了一个关于中国篆刻艺术的静态网站设计与实现方案。网站采用HTML5+CSS3技术构建，包含首页、作品展示、历史渊源等二级页面，采用浮动布局兼容主流浏览器。内容涉及HTML结构代码示例，包括导航栏、banner区和作品展示画廊的实现。文章还提供了学习建议，推荐编程初学者通过刷题巩固基础。网站素材包含精选图片资源，文件结构清晰，可使用多种编辑器进行修改。该模板可灵活应用于美食、旅游等多种主题的展示型网站开发，适合作为学习参考或毕业设计项目。
理解CSS中的BFC和IFC：原理与应用
"本文主要探讨了CSS中的BFC（Block Formatting Context）和IFC（Inline Formatting Context）的用法，适合前端开发者学习和参考。通过理解这两种格式化上下文，可以更好地掌握CSS布局原理和解决相关问题。" 一、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值