CSS BFC

最新推荐文章于 2024-05-25 12:47:13 发布
最新推荐文章于 2024-05-25 12:47:13 发布
阅读量39 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43401689/article/details/117374759
版权

参考https://blog.csdn.net/sinat_36422236/article/details/88763187
补充规则：

1 同一个bfc 的父子元素也会发生margin-top重叠

解决方案有两个

  1. 父元素设置成bfc
  2. 子元素套一个div设置成bfc
    依据：同一个bfc 的父子元素也会发生margin-top重叠

##其他规则

2 BFC的区域不会与float box重叠

左边固定右边自适应

3计算BFC的高度时，浮动元素也参与计算

Abner_木木
关注
专栏目录
css BFC规则
qq_40826764的博客
03-06 606
前言 最近要准备面试了，所以总结一下面试中可能要遇到的知识点。今天是 css的一些点。 正文 BFC 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。 首先是创建BFC的方式： 根元素或包含根元素的元素 浮动元素（元素的 float 不是 none） 绝对定位...
css BFC
wyzsehun的博客
02-22 263
文档流动：定位流、浮动流、普通流（formatting context：渲染区域、渲染规则，简称FC）常见的FC：IFC、BFC、FFC等。
cssBFC
passworddddddd的博客
05-25 176
css 把html的元素当为盒子，每个盒子都有一套渲染规则，正常的渲染规则，比如设定盒子颜色，渲染出盒子颜色。bfc block format context 块级格式化上下文。可以通过特定手段，可以使特定盒子触发bfc语法使渲染规则发生改变。开启2和3后元素转换为行内块元素。如何触发一个盒子的bfc。
CSS BFC介绍
qq_59181609的博客
08-14 310
可以使俩个发生margin重叠的元素中的其中一个触发BFC，以解决俩个元素外边距塌陷的问题。是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。可以通过让父元素触发BFC使父元素依然可以自动计算高度。给元素设置浮动后，该元素拖标，会影响其后面的元素布局。可以使浮动的元素触发BFC，清除掉浮动对布局的影响。BFC名为 "块级格式化上下文"，简单来说就是，的两个相邻的标签外边距也会发生重叠。...
浅谈CSS BFC及其应用
筱葭的博客
03-06 803
Block Formatting Context，即块级格式上下文。 创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。 1、BFC的特性 （1）内部的Box会在垂直方向，从顶部开始一个接一个地放置。 （2）B
css BFC及其作用简介
weixin_42130298的博客
05-15 714
一、BFC的定义 BFC(block formatting context)块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定元素如何对内容进行布局，以及与其他元素的关系和相互作用。------总的来说就是：该区域中的元素布局跟外部互不影响。 二、理解一下文档定位 1.正常情况下 HTML元素按照先后顺序从上到下，从左到右布局，其中块级元素被渲染成为一整行，而行内元素则从左到右排列，直至占满一行为止然后换行。 2.float–浮动 在浮动布局中，元素首先按照正常文档流的位置来出
CSS中的BFC
小卡酷谋的博客
04-22 994
简单来说，就是页面中的一块渲染区域，并且有一套自己的渲染规则。它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。在上面的代码中，父元素的高度是靠子元素撑起来的，但是一旦我们给子元素设置了浮动，那么父元素的高度就塌陷了。效果：在上面的代码中，我们要设置两栏布局，左边栏宽度固定，右边栏自适应。基于此特点，我们就可以制作两栏自适应布局，方法就是给固定栏设置固定宽度，给不固定栏开启。设置了浮动效果，所以会脱离标准流，自然而然。上面只记录了一些常见的方式，完整的。的高度时，浮动子元素也参与计算。
CSS之BFC
从来无所求，所得皆惊喜！
06-04 1389
BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。
CSS BFC原理和定位position
m0_51207602的博客
02-05 376
1.BFC概念 BFC为块级格式化上下文，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。 2.BFC特性及应用 只要元素满足下面任一条件即可触发 BFC 特性： body 根元素 浮动元素：float 除 none 以外的值 绝对定位元素：position (absolute、fixed) display 为
10分钟理解CSS BFC原理及其应用
09-27
CSS BFC（Block Formatting Context，块级格式化上下文）是Web页面布局中的一个重要概念，它定义了一个独立的渲染区域，具有自己特定的布局规则。理解BFC的原理对于解决CSS布局问题和优化页面样式有着重要作用。 ...
Pytorch文本分类(imdb数据集)，包含DataLoader数据加载，最优模型保存
最新发布
09-15
Pytorch文本分类(imdb数据集)，包含DataLoader数据加载，最优模型保存_Pytorch-imdb-classification
5001-微信小程序家庭记账本的设计与实现+ssm（源码+数据库+lun文）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
5334-微信小程序同城交易小程序（源码+数据库）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
iOS一行代码集成空白页面占位图(无数据、无网络占位图)_emptyView-empty_set_LYEmptyView.zip
09-15
iOS一行代码集成空白页面占位图(无数据、无网络占位图)_emptyView-empty_set_LYEmptyView
java-ssm+jsp热带水果商城网站实现源码(项目源码-说明文档)
09-15
登陆系统后，可以查看个人中心，用户管理，地区管理，商品分类管理，商品信息管理，留言板，系统管理，订单管理等功能 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：ssm 前端技术：jsp 关键技术：jsp、spring、ssm、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
5084-微信小程序的影院选座系统+ssm（源码+数据库+lun文）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
5078-微信小程序培训咨询微信小程序+ssm（源码+数据库）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
批量重命名工具-文件、文件夹批量重命名 一键快速处理
09-15
芝麻文件重命名软件是一款专业的重命名软件，支持文件和文件夹批量重命名，一键插入、替换、删除文件名指定字符，给文件名称添加编号、序号，快速修改文件的修改时间、创建时间、后缀名；查看文件属性，修改文件创建时间，修改时间，查看文件的MD5/CRC32/SHA1值，批量创建文件和文件夹。 文件重命名 不限制文件类型，批量重命名文件 文件夹重命名 支持对文件夹批量重命名，操作简单 插入任意字符 可在任意位置插入你需要的字符 替换任意字符 可替换文件名中任意位置的字符 删除指定字符 支持删除文件名中任意位置的字符 添加编号 可在文件名前后位置添加编号 大小写转换 支持小写转大写、大写转小写等多种方式 简繁体转换 支持中文简体转繁体，繁体转简体 中文转拼音 支持把中文名称的文件名转拼音 自定义名称 给文件、文件夹重新设定一个名称 修改文件时间 修改文件的创建时间、修改时间 检测文件属性 可检测文件各种属性，如文件大小，签名，修改等
10分钟掌握CSS BFC原理与实战应用
本文档深入浅出地讲解了CSS BFC（Block Formatting Context，块级格式化上下文）的概念、原理及其在网页布局中的应用。首先，作者通过介绍常见的三种定位方案——普通流、浮动和绝对定位，让读者了解它们的基本工作...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值