CSS3(七)——认识BFC

最新推荐文章于 2023-06-09 17:50:45 发布
最新推荐文章于 2023-06-09 17:50:45 发布
阅读量206 收藏
点赞数
分类专栏： css3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45511236/article/details/107733105
版权

BFC咋回事勒

什么情况下可以让元素产生BFC

这些元素添加如下属性就可以触发BFC。

  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible。

BFC元素所具有的特性

  1. BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
  2. 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

BFC的主要用途

清除元素内部浮动

在BFC中，盒子从顶端开始垂直地一个接一个地排列.
只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。

       计算BFC的高度时，自然也会检测浮动或者定位的盒子高度

在这里插入图片描述

解决外边距合并问题

盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。

在这里插入图片描述

制作右侧自适应的盒子问题

在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。
普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文

在这里插入图片描述

美式因子
关注
专栏目录
HTML、CSS、HTML5、CSS3认识
weixin_43689726的博客
08-08 673
初步认识html和css的常见标签，常见问题
HTML+CSS面试题总结（附答案+视频讲解）
最新发布
xm1037782843的博客
06-25 2739
前端面试题总结 面试题总结 html+css面试题 元素隐藏、盒子垂直居中
【css3】BFC
逆风飞翔的代码狗
07-23 124
BFC 1. 定义： BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域， 只有 Block-level box 参与，它规定了内部的Block-level Box 如何布局，并且与这个区域 外部毫不相干。 布局规则： ​ A. 内部的Box 会在垂直方向，一个接一个地放置。 ​ B. Box垂直方向的距离由 margin决定。属于同一个 BFC的两个相邻 Box的 margin 会发 生重叠。 ​ C. 每个元素的 margin box 的左边
CSS3 之 BFC
qq_53165476的博客
06-09 102
【代码】CSS3 之 BFC。
BFC
gouhuarong的博客
06-22 312
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。 在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。两个相邻的块级盒
CSS中什么是BFC
YouYi__的博客
09-17 233
BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。 BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。 什么时候会触发BFC呢？常见的如下： float的值不为none。 overflow的值为auto,scroll或hidden。 display的值为table-cell, table-caption, inline-block中的任何一个。 position的值不为rel
css3复习P6（BFC）
weixin_48931100的博客
08-05 61
css3复习P6（BFC）
H5前端学习之一HTML和CSS基础认识
小星星~的博客
02-13 672
初学前端
HTML CSS基础
m0_46424423的博客
08-30 711
level 1 姬成 (一)简介 编辑器，快捷键，打字法 命令提示符终端学习 专业素养：超文本标记语言Hyper Text Markup Language (二)HTML标签 1.根标签： <html></html> 2.段落标签:只能有一个 <p>段落标签</p> 3.h标签 独成一段，逐次减少。更改字体大小，加粗字体 <h1></h1>——<h6></h6> 4.加粗字体 <strong>
关于HTML+css的面试题及答案（2）
SSSS__AS的博客
07-08 471
本片文章，是本人所了解到的其他的关于HTML+css的面试题，如我之后还有了解到的，还会进行后续更新。
CSS：什么是BFC
nightwishh的博客
04-29 501
BFC：用来解决使两相邻元素间距发生折叠的问题 在css中按照边距重叠的原则.两元素在一起边距会产生重叠。 他们之间的边距取大的那个元素的边距. 比如有如下代码： <body> <section id="sec"> <p>1</p> <p>2</p> <p>3</p> &lt...
CSS面试之---什么是BFC？
小柒的前端之旅
04-28 6035
前面的话 自己对css真的了解吗？css的知识真的不仅仅限于语法知识。关于BFC、IFC，以前只是听说，大概知道一下是个啥东西，但了解的并不透彻。最近仔细研究了一下BFC、IFC。 ●BFC到底是什么？ 简单的来说：BFC就是一个css的一个**布局概念，是一个独立的区域**，是一个环境。 ●文档流 说BFC之前先说说文档流，文档流分为：浮动流、定位流、普通的标准流，而普通标准流其实就是BFC中的...
什么是BFC?(CSS)
Elementsboy的博客
06-09 325
前言（BFC 神奇背后的原理） BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。 一、BFC是什么？ 在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本
css中的bfc怎么玩？
Tz。
08-02 649
首先弄明白一个概念，上面是bfc？ w3c是这样解释 BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。 说通俗一点就是： float的值不为none position的值不为static或者relative display的值为 table-cell, table-caption, inline-block,
搞懂BFC
qq_38253873的博客
03-25 113
什么是BFC Block Formatting Contexts（BFC） 块级元素格式化上下文 它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系 块级元素：父级（是一个块元素） 内容：子元素（是一个块元素） 其他元素：与内容同级别的兄弟元素 相互作用：BFC里的元素与外面的元素不会发生影响 常用触发条件 浮动元素：float除none以外的值 绝对定位元素：pos...
什么是BFC（初级入门介绍）
小狼驿站
09-23 3995
原文地址链接：http://div.io/topic/834?page=1#3261 说到BFC，就会涉及到CSS布局的一些基本概念，然后，首先来讲一下关于块级盒的一些概念： 下面是来自w3.org中的一句话(参考链接:http://www.w3.org/TR/CSS2/visuren.html#block-formatting)： Block-level ele
CSS定位之【BFC】
Limonor的博客
10-27 220
首先复习一下CSS的几种定位方式 普通流：由上至下，行内元素和块级元素按照自己的摆放规则水平或竖直排布， 浮动流：在普通流的基础上浮动偏移，一般是左右浮动 绝对定位流：整体脱离普通流，元素不占原来位置 ????而BFC属于普通流 初识BFC 块格式化上下文，是Web页面可视化渲染CSS的一部分, 是布局过程中生成块级盒子的区域。也是浮动元素与其他元素的交互限定区域。 我们可以把具有BFC的盒子看做一个隔离的独立容器，它改变内部的渲染方式，不会影响外面的布局。 如何触发BFC 引
BFC(块级格式化上下文)布局特性
star66666651的博客
07-06 266
BFC(块级格式化上下文)？ 块级格式化上下文就相当于页面上一个独立的容器，容器里面子元素的变化不会影响到外面元素的排列。包括浮动外边距合并等等。这个特性的出现使我们的 页面布局不会出现意外情况了。 如何创建BFC? 1 根元素(<html>) 2 元素的display属性设置为 block table list-item inline-block inline-flex table-cell table-caption flex。 3 float不为none。 4 postion为abso
BFC的触发条件及应用：清除浮动、解决外边距合并、盒子自适应
u010234868的专栏
03-25 187
BFC的应用 BFC的主要用途： 清除元素内部浮动：计算BFC的高度时，会检测浮动盒子的高度，撑开BFC的高度。 <!-- 清除元素内部浮动 --> <div class="father"> <div class="son1"></div> <div class="son2"></div> </div> /*清除元素内部浮动*/ .father { width: 500px; border: 1p
CSS隐藏的魔力：BFC深入解析
本文将深入探讨CSS中的"潜藏着的BFC"，即Block Formatting Context，这是一种在网页布局中起着重要作用的概念。BFC是块级元素的一种特殊渲染模式，它为元素创建了一个独立的布局区域，遵循特定的渲染规则。了解BFC有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值