BFC及应用

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

BFC：格式化上下文 Block Formatting Context
是Web页面的可视CSS渲染的一部分，是块盒子的布局发生区域，也是浮动元素与其他元素交互的区域。

创建BFC：

1）html标签是BFC盒子
2）浮动元素是BFC盒子
3）行内块元素是BFC盒子
4）overflow属性取值不为visible时

BFC特点：

1）BFC盒子会默认裹住内部子元素（标准流&浮动）
应用：清除浮动
2）BFC盒子本身与子元素之间不存在margin的塌陷现象
应用：解决margin的塌陷问题

今天晚上一定要早睡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 102
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
10分钟理解CSS BFC原理及其应用
09-27
BFC的应用场景广泛，比如清除浮动、解决外边距折叠问题、创建自适应两栏布局等。熟练掌握BFC原理能帮助开发者更好地控制页面元素的布局，提高页面设计的灵活性和可维护性。在实际开发中，合理利用BFC特性可以避免很...
BFC实现自适应两栏布局
01-20
**BFC（Block Formatting Contexts）** 是CSS布局中的一个重要概念，它定义了块级元素如何在其内部和周围元素交互。BFC可以帮助我们解决许多布局问题，比如**高度塌陷**，并能实现如自适应两栏布局等复杂的布局模式...
bfc的详细介绍以及大总结
01-17
BFC详细介绍BFC详细介绍
CSS布局基础BFC
09-27
BFC在布局中的应用除了解决浮动元素导致的父元素高度塌陷，BFC还用于解决其他布局问题，例如创建自适应两列布局。传统的两列布局通常依赖于浮动，但这种方式可能导致父元素高度计算错误。通过将一边的列设置为BFC，...
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 133
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
Tailwind CSS：颠覆常规的实用主义设计利器
艾恩小灰灰的博客
07-18 254
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1248
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
前端学习（二）之HTML
最新发布
2302_79795489的博客
07-18 671
在<input type="text" name="username" value="西瓜大侠">中，2、单选和多选：radio和checkbox（对应value为选项的值，当选中时，这个值会被提交）3、按钮：button、submit和reset（对应value为按钮上的标签文本）4、隐藏字段：hidden（对应value为隐藏在表单中的用户不可见的数值）段落格式标签：加粗b，斜体i，下划线u，删除线s，换行br，水平分割线hr。1、name：给表单控件起的名字，服务器靠这个名字来识别和获取输入的数据。
CSS-0_3 CSS和单位
乡亲们啊的博客
07-15 838
直到iphone4诞生，彻底改变人们对“上网”这个行为的思维方式。原来我们可以在一个方砖大小的设备上访问页面，那我们将来是不是可以在一个几十上百寸的巨幕上访问页面？在一张A4纸大小的板子上访问页面？人们用千奇百怪的设备访问你的网页，这时候如果你依然墨守成规，那就只能在用户糟糕体验之后的唾弃声中抱着你的电脑屏幕退场。
CSS基础
lvshihao_的博客
07-15 641
项目上线时，我们会通过工具将【展开风格】的代码，变成【紧凑风格】，这样可以减小文。：选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好。外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速。件体积，节约网络流量，同时也能让用户打开网页时速度更快。行内样式表，只能控制当前标签的样式，对其他标签无效。：最后一个声明后的分号理论上能省略，但最好还是写上。1. 内部样式、外部样式，这二者的优先级相同。添加样式，实现了：结构与样式的分离。的思想，不推荐大量使用，只。
CSS图像不透明度的艺术：探索透明度控制的无限可能
Lesleyhnj的博客
07-15 187
在网页设计中，图像的不透明度（Opacity）和透明度（Transparency）是两个关键的概念，它们不仅影响着页面的视觉效果，还能增强用户体验，创造丰富的交互效果。通过调整图像的不透明度，设计师可以实现元素间的层次感，营造柔和或梦幻的氛围，甚至在动画和过渡效果中发挥重要作用。本文将从不同角度深入探讨CSS中控制图像不透明度的技术，帮助你掌握这一技能，提升网站的美学品质。定义与作用： 属性允许我们改变HTML元素的不透明度，取值范围是0到1之间，其中0表示完全透明，1表示完全不透明。这个属性应用于整个元素
css 屏幕四周报警提示
AS_JOPO的专栏
07-16 245
屏幕四周出现律动的红色边框，产生报警提示的效果。
Web前端-Web开发CSS基础4-显示
a15735748145a的博客
07-16 483
1. <div>, <p>, <h1>到<h6>, <ol>与<ul>及其<li>, <table>, <header><footer><section><article><aside><nav>语义元素, <form>2. <div>, <p>, <h1>到<h6>, <ol>与<ul>及其<li>, <table>, <header><footer><section><article><aside><nav>语义元素, <form>，而其父元素的position未设置，则该元素的位置将会相对于谁？
【css】image 使用 transform:scale 放大后显示不全的问题
qq_39559879的博客
07-14 327
为用户点击的坐标值优化体验。问题在于 origin 位于图片下方时，图片放大后出现滚动条，而滚动条的高度会忽略放大显示的图片的上半部分，导致用户滚动到图片上方时会发现图片显示不全。实现图片放大 1.2 倍显示的功能，在此基础上可以修改。值，这样多余的部分会被顶下来，然后在渲染完成后设置。解决：可以设置图片的。，让图片滚动到原先的。
CSS 中的 ::before 和 ::after 伪元素
m0_65029152的博客
07-11 1140
本文主要记录CSS中的 ::before 和 ::after 伪元素的相关内容和使用场景；
内容长度不同的div如何自动对齐展示
PanDa____的博客
07-15 258
css 实现 无固定高度且同级元素可对齐展示
在CSS中如何实现响应式设计以及几种常用的媒体查询方法。
2402_84885073的博客
07-15 181
在CSS中实现响应式设计主要依赖于媒体查询（Media Queries），这是一种CSS技术，允许你根据不同的条件（如屏幕宽度、设备类型等）来应用不同的样式规则。这使得网站或应用能够在不同的设备和屏幕尺寸上提供优化和适应性的布局、字体大小和图像。
css设置弹性flex后，如果设置100vh高度不撑满的原因
weixin_43883615的博客
07-14 529
但是如果此时设置第一个div的高度为100vh，父元素必须设置高度为height: 100% 或min-height: 100vh，才能实现第一个div高度完全占满，如果设置height：100vh，则无效，虽然父盒子撑满了，但是第一个盒子属于是。父元素设置height为100%，有两个子元素，第一个设置height:100vh，第二个设置flex:1，此时第一个高度无法撑满盒子。（2）第一个子元素：此时设置height：100vh就会生效了，高度可占满盒子。，因为给第二个盒子的flex：1。
什么时候使用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、付费专栏及课程。

余额充值