BFC的定义和作用

最新推荐文章于 2023-12-10 23:22:20 发布
最新推荐文章于 2023-12-10 23:22:20 发布
阅读量137 收藏
点赞数
文章标签： 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
    评论
专栏目录
BFC定义及其应用
liu14lang的博客
04-29 219
BFC BFC 的定义 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks，table-cells 和 table-captions），以及 overflow 值不为“ visible ”的块级盒子，都会创建 BFC（块格式化上下文）。 BFC 特点 元素的布局不受外界影响，往往利用其来消除浮动。 在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直...
HTML-bfc初探
08-03
3. **BFC的作用**： - **清除浮动**：在BFC内，子元素不会影响其外边距，可以解决父元素因浮动子元素而高度塌陷的问题。 - **防止元素重叠**：BFC区域内的元素不会与BFC区域外的元素发生重叠。 - **内部元素垂直...
CSS中的BFC详细讲解（易懂）
weixin_57677300的博客
02-16 7286
一个BFC区域只包含它的子元素，不包含其子元素的子元素。成为一个BFC区域要满足一定的条件。不同的BFC区域相互独立，互补影响。BFC是属于普通流的，我们可以把BFC看成页面的一块渲染区，他有自己的渲染规则，简单来说就是BFC可以看做元素的属性，当元素有了BFC这个属性，这个元素可以看做隔离了的容器，容器里面的元素不会在布局上影响到外面的元素。
BFC（边距重叠解决方案）
m0_59070120的博客
09-14 395
（3）每个元素的margin Box的左边， 与包含块border Box的左边相接触，（对于从左到右的格式化，否则相反）。3、可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内）（4）BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。BFC基本概念：BFC是CSS布局的一个概念，是一块独立的渲染区域，里面元素的布局不会影响到外部元素。（5）BFC 的区域不会与float Box重叠（清浮动）;
CSS中BFC详解
最新发布
weixin_46016926的博客
12-10 67
块的上外边距margin-top和下外边距margin-bottom会合并为单个边距，如果两个边距相等取其中一个，若大小边距不一样区最大边距。给这两个box给各自一个div包裹，然后给这个div添加 overflow: hidden;给父容器添加BFC属性，添加overflow: hidden;属性，触发BFC, 这样这两个属性就互不干扰。给子元素添加了浮动导致子元素脱离了文档流，所以父盒子只剩下2px的边框,并没有将子盒子包住。给父盒子添加overflow: hidden;属性，触发BFC即可。
CSS BFC属性的概念及作用
weixin_51445423的博客
04-10 329
BFC属性的概念及作用
[CSS] 什么是元素的BFC属性，如何应用BFC的特性
一起来看烟花吧的博客
04-18 683
目录标题什么是BFC如何开启元素的BFC属性BFC的特性和应用同一个BFC下的垂直相邻外边距会发生重叠通过开启BFC可以避免垂直外边距的重叠的问题开启了BFC的元素可以包含浮动的元素开启BFC的元素不会被浮动的元素覆盖 什么是BFC 根据w3c的标准，在页面中元素都含有一个隐含的属性叫做Block Formatting Context，简称BFC，该属性可以设置打开或者关闭。默认是关闭。 Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区
BFC实现自适应两栏布局
01-20
**BFC（Block Formatting Contexts）** 是CSS布局中的一个重要概念，它定义了块级元素如何在其内部和周围元素交互。BFC可以帮助我们解决许多布局问题，比如**高度塌陷**，并能实现如自适应两栏布局等复杂的布局模式...
CSS布局基础BFC
09-27
BFC在清除浮动中的作用浮动元素会影响其后的非浮动元素，这通常会导致非浮动元素上移以填充浮动元素留下的空白。为了解决这个问题，我们可以使非浮动元素成为BFC，这样它就不会受到前面浮动元素的影响。CSS Code复制...
10分钟理解CSS BFC原理及其应用
09-27
理解BFC的原理对于解决CSS布局问题和优化页面样式有着重要作用。 首先，我们来看看BFC的常见定位方案。在CSS布局中，有三种基本的定位方式： 1. **普通流（Normal Flow）**：这是元素默认的布局方式，元素按照它们...
前端基础——文档流与BFC
09-26
BFC是一种渲染规则，它定义了元素如何在其内部以及与其他元素相互作用。创建BFC的元素会形成一个独立的布局环境，其中元素的排列不会影响外部元素。以下情况可以创建BFC： 1. 根元素（html元素） 2. 浮动元素（`...
BFC及其特性详解
健子
07-23 1981
什么是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...
CSS属性、BFC、IFC
拼搏的夏目
09-23 929
定位属性1.clear 规定哪一侧不允许元素浮动 left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧 2.clip 剪裁绝对定位的元素 clip:rect(上top，右right,bottom下，left左) 左和上：裁掉多少写多少 右和下：显示多少写多少3.display 规定元素
浅析BFC原理及作用
杜小白的博客
05-21 1万+
一、常见布局模式在讲BFC之前，我们先来看一下常见的CSS三种布局模型：CSS中的三种布局模型：流动模型（Flow）、浮动模型（Float）和层模型（Layer）。详解在我的另一篇博文中讲到，CSS中的三种布局模型。二、BFC概念 BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述布局模式的流动模型。是W3C CSS2.1规范中的一个概念，决定了...
什么是BFC ？BFC的特性和作用
chengzhangdewo的博客
09-28 352
BFC(Blockformattingcontext) 直译为块级格式化上下文，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性，当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素. 常见的定位方案 ###1.普通流 1.元素按照其在HTML中的先后位置至上而下进行布局 2.行内元素水平排列，直至当行被占满然后换行，块级元素则会被渲染为完整的一整行 3.所有元素默认都是普通流定位 ###2.浮动 元素首先按照普通流的...
浅析BFC及其作用
riddle1981的博客
08-05 2万+
一、什么是BFC BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。 中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不
BFC的特性及其常见应用
文燚的博客
03-08 1673
1.   什么是BFCBFC（Block Formatting Context——块格式化上下文）是Web页面的可视化CSS渲染的一部分。它是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。简单来说，BFC是一个独立的渲染区域，它遵循以下渲染规则。2.   BFC的渲染规则      1. BFC在Web页面上是一个独立的容器，容器内外互不影响      2. 和标准文档流一样...
BFC属性
qq_43620423的博客
01-31 225
BFC 1.简介 根据W3C的标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context,简称BFC，该属性可以设置打开或者关闭，默认是关闭的。 2.作用 当开启元素的BFC以后，元素将会具有如下特性： 父元素的垂直外边距不会和子元素重叠 开启BFC的元素不会被浮动元素所覆盖 开启BFC的元素可以包含浮动的子元素 3.开启 如何开启元素的BFC 设置元素浮动 设...
什么是BFC？看这一篇就够了
热门推荐
Leon的博客
03-23 27万+
BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。 Box：css布局的基本单位 Box 是 CSS 布局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值