浅谈BFC

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

一、什么是BFC

块格式上下文（Block Formatting Context）BFC。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

二、如何创建一个BFC?

  1. html是BFC盒子

  2. 浮动元素是BFC盒子

  3. 行内块元素也是BFC盒子

  4. overflow取值不为visible的值 如:auto hidden

  5. ......

三、BFC的特点

  1. BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动

  2. BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用：解决margin的塌陷

  3. ......

Bian_Zhuang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
谈一谈自己对BFC的理解
titoni_yunruohan的博客
01-08 281
一、BFC概念 BFC全名为块级格式化上下文，它是一个独立的渲染区域，其内部的盒子如何布局只遵循块级格式化上下文的规则，不受外部元素的干扰 二、如何定义BFC 当前元素的float属性不为none 当前元素的position属性不为static和relative 当前元素的overflow属性不为visible 当前元素的display属性是inline-block、table-cell、flex、table-caption和inline-flex 三、BFC的布局规则 每个盒子都占一行，在垂
浅谈CSS潜藏着的BFC
09-24
主要介绍了浅谈CSS潜藏着的BFC的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈CSS 高度塌陷问题
12-30
表现 例如： HTML： <div class=first-child1>first-child1 <div class=first-child2>first-child2 second third CSS： .first{ width: 300px; background-color: pink;....first .first-child1,.f
HTML-bfc初探
08-03
理解BFC可以帮助我们更好地控制网页的布局，解决浮动元素引起的问题，以及实现更精确的定位。 1. **什么是BFC**： BFC是一个独立的渲染区域，每个元素都会创建自己的BFC，内部的元素会按照一定的规则进行排列，...
BFC实现自适应两栏布局
01-20
**BFC（Block Formatting Contexts）** 是CSS布局中的一个重要概念，它定义了块级元素如何在其内部和周围元素交互。BFC可以帮助我们解决许多布局问题，比如**高度塌陷**，并能实现如自适应两栏布局等复杂的布局模式...
CSS布局基础BFC
09-27
浮动，蓝色的父元素高度就会塌陷，但如果我们让这个父元素成为一个BFC，这个问题就能得到解决。CSS Code复制内容到剪贴板1. .parent { 2. overflow: hidden; /* 创建BFC */ 3. background-color: blue; 4. } 5. ....
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 2823
title>充电效果
CSS实现table表格：隔行换色的效果
pan_junbiao的博客
07-12 308
表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号表示。定义表格光使用是不够的，还需要定义表格中的行、列、标题等内容。在CSS中，可以使用 nth-child 选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素，nth-child(odd) 可以匹配奇数行，nth-child(even) 可以匹配偶数行。使用CSS样式实现 table 表格隔行换色的效果。
css-grid布局(栅格布局)
YogaMiller的博客
07-15 527
* 数字和命名搭配搭配也可, 1 / t 注意如果是一个位置的话可省略, 比如 1 / 2 2 / 3 这里的2 3就可以省略*//* [d]150px 100px;搞不懂为什么加个命名就变小了.... *//* 目前喜欢这种的方式, 比较直观 . 表示这个位置空着 */grid 一个比flex更强大的布局,适合做整体布局。/* g-r-start g-r-end 的简称 *//* 相同的名字 代表相同的区域 */fr 只能放在第二个参数。
HTML5+CSS3小实例：纯CSS实现奥运五环
艾恩小灰灰的博客
07-15 140
实例：纯CSS实现奥运五环。技术栈：HTML+CSS。
CSS实现从上往下过渡效果
m0_56164131的博客
07-11 228
要实现一个从上往下显示的过渡效果，可以使用CSS的@keyframes规则来创建一个动画，使得元素在垂直方向上逐渐改变其位置。
scss 语法
True Truth
07-14 115
scss 是 css 的超集， 主要是引入了 变量， 函数， 继承， 算术计算。
CSS-0_3 CSS和单位
最新发布
乡亲们啊的博客
07-15 493
直到iphone4诞生，彻底改变人们对“上网”这个行为的思维方式。原来我们可以在一个方砖大小的设备上访问页面，那我们将来是不是可以在一个几十上百寸的巨幕上访问页面？在一张A4纸大小的板子上访问页面？人们用千奇百怪的设备访问你的网页，这时候如果你依然墨守成规，那就只能在用户糟糕体验之后的唾弃声中抱着你的电脑屏幕退场。
CSS基础
lvshihao_的博客
07-15 404
项目上线时，我们会通过工具将【展开风格】的代码，变成【紧凑风格】，这样可以减小文。：选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好。外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速。件体积，节约网络流量，同时也能让用户打开网页时速度更快。行内样式表，只能控制当前标签的样式，对其他标签无效。：最后一个声明后的分号理论上能省略，但最好还是写上。1. 内部样式、外部样式，这二者的优先级相同。添加样式，实现了：结构与样式的分离。的思想，不推荐大量使用，只。
CSS图像不透明度的艺术：探索透明度控制的无限可能
Lesleyhnj的博客
07-15 72
在网页设计中，图像的不透明度（Opacity）和透明度（Transparency）是两个关键的概念，它们不仅影响着页面的视觉效果，还能增强用户体验，创造丰富的交互效果。通过调整图像的不透明度，设计师可以实现元素间的层次感，营造柔和或梦幻的氛围，甚至在动画和过渡效果中发挥重要作用。本文将从不同角度深入探讨CSS中控制图像不透明度的技术，帮助你掌握这一技能，提升网站的美学品质。定义与作用： 属性允许我们改变HTML元素的不透明度，取值范围是0到1之间，其中0表示完全透明，1表示完全不透明。这个属性应用于整个元素
CSS变换
m0_63165331的博客
07-14 459
本文主要讲述CSS中的变换相关内容。
前端面试题(CSS篇八)
weixin_74068942的博客
07-12 1167
资料参考:《CSS 隐藏元素的八种方法》
CSS 中的 ::before 和 ::after 伪元素
m0_65029152的博客
07-11 929
本文主要记录CSS中的 ::before 和 ::after 伪元素的相关内容和使用场景；
什么时候使用BFC布局
05-13
BFC（Block Formatting Context）布局是一种常用的布局方式，特别适用于处理浮动元素、清除浮动、防止 margin 重叠等问题。以下是一些常见情况下建议使用BFC布局的场景： 1. 处理浮动元素：当一个元素设置了浮动属性后，它会脱离文档流并可以覆盖其他元素。此时可以将其父元素设置为 BFC，使得浮动元素只能在 BFC 内进行布局，从而避免影响其他元素的布局。 2. 清除浮动：当父元素包含浮动元素时，父元素的高度无法被撑开，可能导致父元素无法完全包含子元素。此时可以将父元素设置为 BFC，使得父元素的高度可以被包含其中的浮动元素撑开。 3. 防止 margin 重叠：当两个相邻的元素都设置了 margin 属性时，它们的 margin 可能会合并，导致 margin 重叠问题。此时可以将其中一个元素或者其父元素设置为 BFC，使得 margin 不会合并。 总之，BFC 布局可以帮助我们更好地控制元素的布局，避免一些常见的布局问题。但是，在实际应用中也需要注意 BFC 的特性可能会影响到其他元素的布局，需要进行合理的设计和调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值