BFC的定义和作用

最新推荐文章于 2023-12-10 23:22:20 发布
最新推荐文章于 2023-12-10 23:22:20 发布
阅读量136 收藏
点赞数
文章标签： css
BY Dreamer同学
本文链接：https://blog.csdn.net/weixin_42579348/article/details/119106839
版权

BFC的定义和作用

文章目录


在页面中的元素都有一个隐含的属性，这个属性叫做BFC(Block Formatting contnt)，该属性可以开启或关闭

当开启元素的BFC属性时，元素有如下特征：

  1. 父元素的垂直外边距不会和子元素重叠。（不会产生外边距传递）
  2. 开启BFC的元素不会被浮动的元素覆盖。
  3. 开启BFC的父元素可以包含浮动元素。

开启BFC解决外边距重叠问题

为任意元素添加父元素并开启BFC

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1</title>
  <style>
    .son{
      border: 1px red solid;
      width: 150px;
      height: 150px;
      background-color: chartreuse;
      margin-bottom: 50px;
    }
    .father{
      overflow:hidden ;
    }
    .box{
      width: 150px;
      height: 150px;
      margin-top: 40px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
  <div class="box"></div>
</body>
</html>

在这里插入图片描述

给子元素设置margin-top:50px;发生子父元素发生外边距传递

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father{
      width: 300px;
      height: 300px;
      background-color: red;
      /* 给父元素开启BFC */
      overflow: hidden;
    }
    .son{
      width: 100px;
      height: 100px;
      background-color: blue;
      margin-top: 50px;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

在这里插入图片描述

BFC解决浮动元素覆盖问题

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .c1{
      float: left;
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .c2{
      width: 300px;
      height: 300px;
      background-color: aqua;
      /* 开启BFC解决浮动元素覆盖问题 */
      overflow: hidden;
    }
  </style>
</head>
<body>
  
  <div class="c1"></div>
  <div class="c2"></div>
</body>
</html>

在这里插入图片描述

如果在c2后面再添加一个div，则会在下一行显示，如：

在这里插入图片描述

开启BFC属性解决浮动问题：

  1. 设置元素浮动 -->副作用：父元素下面的兄弟元素会上移，不建议使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>1</title>
  <style>
    .father{
      border: 1px red solid;
      float: left;
    }
    .son{
      width: 100px;
      height: 100px;
      background-color: aqua;
      /* 设置浮动 */
      float: left;
    }
    .box{
      /* clear: left; */
      width: 150px;
      height: 150px;

      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
  <div class="box"></div>
</body>
</html>

在这里插入图片描述

  1. 设置元素的决定定位或固定定位：position:absolute;–>副作用：父元素下面的兄弟元素会上移，不建议使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>1</title>
  <style>
    .father{
      border: 1px red solid;
      /* 使用定位开启BFC */
      position: absolute;
    }
    .son{
      width: 100px;
      height: 100px;
      background-color: aqua;
      /* 设置浮动 */
      float: left;
      
    }
    .box{
      /* clear: left; */
      width: 150px;
      height: 150px;

      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
  <div class="box"></div>
</body>
</html>

在这里插入图片描述

  1. 使用设置元素inline-block方式–>副作用：如果父元素没有设置宽度，则父元素宽度丢失
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>1</title>
  <style>
    .father{
      border: 1px red solid;
      /* 使用inline-block方式开启BFC */
      display: inline-block;
    }
    .son{
      width: 100px;
      height: 100px;
      background-color: aqua;
      /* 设置浮动 */
      float: left;
      
    }
    .box{
      /* clear: left; */
      width: 150px;
      height: 150px;

      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
  <div class="box"></div>
</body>
</html>

在这里插入图片描述

  1. 将元素的overflow设置为非visible的值方式开启。副作用小，通常使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>1</title>
  <style>
    .father{
      border: 1px red solid;
      /* 将元素的overflow设置为非visible的值方式开启 */
      overflow: hidden;
    }
    .son{
      width: 100px;
      height: 100px;
      background-color: aqua;
      /* 设置浮动 */
      float: left;
      
    }
    .box{
      /* clear: left; */
      width: 150px;
      height: 150px;

      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
  <div class="box"></div>
</body>
</html>

在这里插入图片描述

我是Dreamer啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML-bfc初探
08-03
3. **BFC的作用**： - **清除浮动**：在BFC内，子元素不会影响其外边距，可以解决父元素因浮动子元素而高度塌陷的问题。 - **防止元素重叠**：BFC区域内的元素不会与BFC区域外的元素发生重叠。 - **内部元素垂直...
CSS布局基础BFC
09-27
BFC在清除浮动中的作用浮动元素会影响其后的非浮动元素，这通常会导致非浮动元素上移以填充浮动元素留下的空白。为了解决这个问题，我们可以使非浮动元素成为BFC，这样它就不会受到前面浮动元素的影响。CSS Code复制...
BFC属性
qq_43620423的博客
01-31 223
BFC 1.简介 根据W3C的标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context,简称BFC，该属性可以设置打开或者关闭，默认是关闭的。 2.作用 当开启元素的BFC以后，元素将会具有如下特性： 父元素的垂直外边距不会和子元素重叠 开启BFC的元素不会被浮动元素所覆盖 开启BFC的元素可以包含浮动的子元素 3.开启 如何开启元素的BFC 设置元素浮动 设...
元素的BFC属性
rbh200812的博客
08-10 185
元素BFC属性
什么是BFC ？BFC的特性和作用
chengzhangdewo的博客
09-28 348
BFC(Blockformattingcontext) 直译为块级格式化上下文，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性，当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素. 常见的定位方案 ###1.普通流 1.元素按照其在HTML中的先后位置至上而下进行布局 2.行内元素水平排列，直至当行被占满然后换行，块级元素则会被渲染为完整的一整行 3.所有元素默认都是普通流定位 ###2.浮动 元素首先按照普通流的...
CSS BFC属性的概念及作用
weixin_51445423的博客
04-10 328
BFC属性的概念及作用
自适应三栏布局BFC属性
qq_42030027的博客
03-16 427
(1)自身浮动（2）双飞翼（3）绝对定位三种都是通过设定margin值和定位属性实现自适应三栏。这样一旦左右两侧栏目宽度变化，就要更改margin的值，十分麻烦。 但是在张鑫旭老师的《CSS世界》中提到一种方法，利用BFC属性，随意改变左右两侧的宽度，不需要改变其他值也能实现自适应三栏。具体原因可以参考该书的160页。 触发BFC的情况： 根元素，float属性不为none，overflow的属性...
10分钟理解CSS BFC原理及其应用
09-27
理解BFC的原理对于解决CSS布局问题和优化页面样式有着重要作用。 首先，我们来看看BFC的常见定位方案。在CSS布局中，有三种基本的定位方式： 1. **普通流（Normal Flow）**：这是元素默认的布局方式，元素按照它们...
前端基础——文档流与BFC
09-26
BFC是一种渲染规则，它定义了元素如何在其内部以及与其他元素相互作用。创建BFC的元素会形成一个独立的布局环境，其中元素的排列不会影响外部元素。以下情况可以创建BFC： 1. 根元素（html元素） 2. 浮动元素（`...
BFC的布局规则.docx
03-01
**BFC（Block Formatting Context）**是Web布局中的一个重要概念，它定义了元素内部块级元素如何排列，并且与外部环境隔绝。了解BFC的布局规则对于优化页面布局和解决一些常见的CSS问题至关重要。 1. **内部Box的...
关于BFC的一些知识总结
前端小白菜
07-23 256
定义、形成条件、布局规则、应用
CSS属性、BFC、IFC
拼搏的夏目
09-23 926
定位属性1.clear 规定哪一侧不允许元素浮动 left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧 2.clip 剪裁绝对定位的元素 clip:rect(上top，右right,bottom下，left左) 左和上：裁掉多少写多少 右和下：显示多少写多少3.display 规定元素
CSS中BFC详解
最新发布
weixin_46016926的博客
12-10 60
块的上外边距margin-top和下外边距margin-bottom会合并为单个边距，如果两个边距相等取其中一个，若大小边距不一样区最大边距。给这两个box给各自一个div包裹，然后给这个div添加 overflow: hidden;给父容器添加BFC属性，添加overflow: hidden;属性，触发BFC, 这样这两个属性就互不干扰。给子元素添加了浮动导致子元素脱离了文档流，所以父盒子只剩下2px的边框,并没有将子盒子包住。给父盒子添加overflow: hidden;属性，触发BFC即可。
【项目属性集合】和BFC
zzmbkh的博客
09-10 97
项目1：扩张因子为0默认值，则不会索取父级多余空间
[CSS] 什么是元素的BFC属性，如何应用BFC的特性
一起来看烟花吧的博客
04-18 678
目录标题什么是BFC如何开启元素的BFC属性BFC的特性和应用同一个BFC下的垂直相邻外边距会发生重叠通过开启BFC可以避免垂直外边距的重叠的问题开启了BFC的元素可以包含浮动的元素开启BFC的元素不会被浮动的元素覆盖 什么是BFC 根据w3c的标准，在页面中元素都含有一个隐含的属性叫做Block Formatting Context，简称BFC，该属性可以设置打开或者关闭。默认是关闭。 Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区
CSS中的BFC详细讲解（易懂）
weixin_57677300的博客
02-16 7122
一个BFC区域只包含它的子元素，不包含其子元素的子元素。成为一个BFC区域要满足一定的条件。不同的BFC区域相互独立，互补影响。BFC是属于普通流的，我们可以把BFC看成页面的一块渲染区，他有自己的渲染规则，简单来说就是BFC可以看做元素的属性，当元素有了BFC这个属性，这个元素可以看做隔离了的容器，容器里面的元素不会在布局上影响到外面的元素。
BFC（边距重叠解决方案）
m0_59070120的博客
09-14 393
（3）每个元素的margin Box的左边， 与包含块border Box的左边相接触，（对于从左到右的格式化，否则相反）。3、可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内）（4）BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。BFC基本概念：BFC是CSS布局的一个概念，是一块独立的渲染区域，里面元素的布局不会影响到外部元素。（5）BFC 的区域不会与float Box重叠（清浮动）;
BFC及其特性详解
健子
07-23 1974
什么是BFC BFC（Block Formatting Context）块级格式化上下文，w3c文档描述： 9.4 Normal flow Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level...
BFC（block formatting context）块级格式化上下文
weixin_44785498的博客
01-12 342
BFC 1 为什么会有BFC？ 从理论上来讲，被包含在父元素里的元素是不会影响到父元素旁边的元素，但实际上并不总是如此。那么有什么办法让里面的元素和外面元素真正隔离开？因此有了BFC 父元素受子元素影响例子：子元素浮动，父元素的高度被压缩变为 0 2 BFC 的定义 BFC: block formatting context 块级格式化上下文。 BFC的目的就是形成一个完成独立的空间，让空间中的子元素不会影响到外面的元素。 3 如何触发 BFC 触发BFC有4种方式 float 不为 none posit
前端面试秘籍.pdf
10-21
掌握BFC可以帮助解决布局问题，如防止内容溢出和解决高度塌陷。 3. 清除浮动： 浮动元素会导致父元素高度塌陷，即父元素无法自动扩展以包含浮动子元素。有多种方法可以清除浮动，如： - 添加空div并应用`clear:...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值