一分钟带你了解BFC

最新推荐文章于 2024-07-12 21:49:18 发布
最新推荐文章于 2024-07-12 21:49:18 发布
阅读量178 收藏
点赞数
文章标签： html css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clc_bk/article/details/121763437
版权

BFC是什么

     格式化上下文 ,他是文档中的一块渲染区域,他有一套自己的渲染规则,他决定了子元素如何定位,以及和其他元素的关系和相互作用

如何触发BFC

1.根元素(<html>)

2.浮动定位(元素的float不是none)

3.绝对定位(元素的position为absolute或者fixed)

4.行内块元素(元素的display为inline-block)

5.表格单元格(元素的display为table-cell,HTML表单单元格默认为该值)

6.overflow不等于visible

7了解更多参考https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

BFC的特性

1.同一个BFC,上下外边距会重合(也就是外边距塌陷)

2.清除浮动(BFC可以包含浮动元素)

3.BFC区域不会和float元素重叠

clc_bubble tea
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一分钟掌握CSS之BFC，margin塌陷
m0_46358229的博客
04-02 142
一分钟入门并掌握CSS之BFC，margin塌陷 大家好，我是YoursJoker，想要走出大山的一个小菜鸟，今天将用简单易懂的语言，让大家快速了解和掌握CSS中的BFC和margin塌陷（本人新手一枚，各位大佬们多多包涵） 何为BFC BFC就是块级格式化上下文block formatting context BFC特性： BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的...
10分钟理解CSS BFC原理及其应用
12-09
了解BFC的工作原理对于优化网页布局至关重要。 一、常见定位方案 1. **普通流(normal flow)**：这是最基础的布局方式，元素按照HTML中的顺序自上而下排列。行内元素水平分布，直到一行排满后换行，而块级元素则...
一分钟了解“BFC“
charlie________的博客
03-28 101
例如，当一个元素被设置为BFC时，它的子元素将不会溢出到其父元素之外，而是会在BFC中进行布局。当一个元素被设置为BFC时，它将形成一个独立的渲染区域，与其他元素的布局相互隔离。例如，当一个浮动元素与一个非浮动元素发生重叠时，可以将非浮动元素设置为BFC，以避免这种重叠问题。”，是Web页面中的一种CSS渲染机制。每个HTML元素都存在于一个特定的BFC中，该BFC决定了元素如何对其周围的元素进行布局和相互作用。总之，BFC是Web页面布局中一个非常重要的概念，对于解决一些常见的布局问题非常有帮助。
10分钟了解什么是BFC
weixin_30724853的博客
05-22 99
BFC对于已经是一个耳熟能详的词汇了，而且在前端面试中，这题也是一个高频题。虽然我们平时在开发的时候知道如何利用BFC来解决问题，但是我们要具体说出BFC的概念和怎么触发BFC，我相信很多小伙伴也是和我一样不知道的 什么是BFC？ 块级格式化上下文,W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...
10 分钟理解 BFC 原理
hellom_m的博客
03-29 155
一、常见定位方案 在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案: 普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 ...
一文带你了解 HTTP 黑科技
热门推荐
程序员cxuan的个人主页
01-31 1万+
这是 HTTP 系列的第三篇文章，此篇文章为 HTTP 的进阶文章。 在前面两篇文章中我们讲述了 HTTP 的入门，HTTP 所有常用标头的概述，这篇文章我们来聊一下 HTTP 的一些 黑科技。 HTTP 内容协商 什么是内容协商 在 HTTP 中，内容协商是一种用于在同一 URL 上提供资源的不同表示形式的机制。内容协商机制是指客户端和服务器端就响应的资源内容进行交涉，然后提供给客户端最为适合的...
10分钟理解BFC
会敲代码的男老师的博客
02-03 127
一、常见定位方案 在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案: 普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。 浮动 (float) 在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽
一篇文章带拿下盒模型BFC渲染机制
weixin_33742618的博客
01-13 98
走在前端的大道上 本篇将自己读过的相关 盒模型BFC 文章中，对自己有启发的章节片段总结在这（会对原文进行删改）,会不断丰富提炼总结更新。 一.常见定位方案 在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案: 普通流 (normal flow)在普通流中，元素按照其在 HTML 中的先后位置至...
BFC是什么？10 分钟讲透 BFC 原理
秋天，黄叶坠地，凉风有信。
03-30 337
BFC是什么 1. 引言 在前端的布局手段中，一直有这么一个知识点，很多前端开发者都知道有它的存在，但是很多人也仅仅是知道它的存在而已，对它的作用也只是将将说得出来，可是却没办法说得非常的清晰。这个知识点，就是BFC。想要了解BFC的规则，前提必须是熟悉前端网页的多种布局手段，例如盒的显示模式display，三种布局手段标准流(normal)、浮动流(float)、定位流(position)等。你只有熟练掌握了这些布局手段之后，才能很好的理解BFC。今天这篇文章，来大家解析一下BFC，希望对各位新老朋友有所
10分钟带你揭开BFC真面目
zjjcchina的博客
07-19 49
使得父元素.box触发了BFC，此时top块和bottom块属于不同的BFC，top块的BFC仍然是根元素（<html>），bottom块的BFC是父元素.box。，使得父元素.box触发了BFC，而BFC特性规定“计算BFC高度时浮动元素也参于计算”，此时子元素.content虽然设置了浮动，但其高度仍计算至父元素内，从而解决了高度塌陷问题。，使得右侧元素触发了BFC，而BFC特性规定“BFC的区域不会与浮动容器发生重叠”，从而解决了重叠问题，实现自适应两栏效果。注：overflow: hidden;
HTML-bfc初探
08-03
BFC是一个独立的渲染区域，每个元素都会创建自己的BFC，内部的元素会按照一定的规则进行排列，不会影响外部元素的布局。BFC主要用于解决元素重叠、清除浮动等问题。 2. **创建BFC的条件**： - 根元素（如`<html>`...
BFC实现自适应两栏布局
01-20
**BFC（Block Formatting Contexts）** 是CSS布局中的一个重要概念，它定义了块级元素如何在其内部和周围元素交互。BFC可以帮助我们解决许多布局问题，比如**高度塌陷**，并能实现如自适应两栏布局等复杂的布局模式...
TensorFlow内存管理bfc算法实例
09-18
今天小编就为大家分享一篇TensorFlow内存管理bfc算法实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 804
title>充电效果
Web开发 —— 放大镜效果（HTML、CSS、JavaScript）
最新发布
m0_65029152的博客
07-12 955
本文记录一下，使用HTML、CSS、JavaScript实现放大镜效果的过程，以及相关代码；
[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式
qq_45831414的博客
07-08 408
【代码】[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式。
一文清晰了解HTML——简单实例
weixin_73074505的博客
07-08 323
1.img中src有绝对路径、相对路径及网络路径之分。其中相对路径有../上一目录 ./当前目录 （./可省略） 命令。 【上述为网络路径】 2. img还有width与heigh，单位可为px（像素）一般屏幕分辨率为1024*768；可为百分比，意为占body长或高的百分之多少。
HTML 标签简写及全称:表格内容将通过JavaScript动态生成
lulei5153的博客
07-09 223
【代码】HTML 标签简写及全称:表格内容将通过JavaScript动态生成。
什么时候使用BFC布局
05-13
BFC（Block Formatting Context）布局是一种常用的布局方式，特别适用于处理浮动元素、清除浮动、防止 margin 重叠等问题。以下是一些常见情况下建议使用BFC布局的场景： 1. 处理浮动元素：当一个元素设置了浮动...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值