请说说什么是BFC

已于 2023-10-16 15:21:17 修改
阅读量110 收藏
点赞数
文章标签： css html5 html
于 2021-09-27 11:58:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_30980795/article/details/120505529
版权

BFC到底是什么东西

BFC 全称：Block Formatting Context， 名为 “块级格式化上下文”。
W3C：BFC是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用；
简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性

怎样触发BFC

overflow: hidden
position: absolute
position: fixed
display: inline-block
display: table-cell
display: flex

解决问题：
1.解决高度塌陷问题
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动</title>
</head>
<style>
    .par {
        border: 5px solid rgb(91, 243, 30);
        width: 300px;
    }
    
    .child {
        border: 5px solid rgb(233, 250, 84);
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

可以看到父元素的高度没有被撑开，颜色没有出来，因为子元素设置了float，解决这个问题可以用BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动</title>
</head>
<style>
    .par {
        border: 5px solid rgb(91, 243, 30);
        width: 300px;
        overflow: hidden;
    }
    
    .child {
        border: 5px solid rgb(233, 250, 84);
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

改后的效果：
在这里插入图片描述

2.解决margin重叠问题
默认：两个div外边距，取最大的外边距，防止margin重叠，开启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>
        .box {
            margin: 10px;
            width: 100px;
            height: 100px;
            background: #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

在这里插入图片描述
外边距重叠了，可结果显示两个盒子之间只有10px的距离，这就导致了margin塌陷问题，这时margin边距的结果为最大值，而不是合，为了解决此问题可以使用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>
    .box {
      margin: 10px;
      width: 100px;
      height: 100px;
      background: #000;
    }

    .father_box {
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box"></div>
    <div class="father_box">
      <div class="box"></div>

    </div>
  </div>
</body>

</html>

在这里插入图片描述

3.自适应两（多）栏布局。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }
 
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
 
    .right {
        height: 300px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>
</html>

使用BFC之后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }
 
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
 
    .right {
        overflow: hidden;
        height: 300px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>
</html>

改后的效果：
在这里插入图片描述

总结：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

weixin_30980795
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
什么是BFC？ CSS 使用伪元素清除浮动的方法
12-13
BFC概念： 　块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上...
HTML-bfc初探
08-03
1. **什么是BFC**： BFC是一个独立的渲染区域，每个元素都会创建自己的BFC，内部的元素会按照一定的规则进行排列，不会影响外部元素的布局。BFC主要用于解决元素重叠、清除浮动等问题。 2. **创建BFC的条件**： -...
BFC是什么？
Big_YiFeng的博客
07-01 172
BFC到底是什么东西 BFC 全称：Block Formatting Context， 名为 “块级格式化上下文”。 W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。 简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性 怎样触发BFC ove
面试官：请说说什么是BFC？大白话讲清楚
热门推荐
蛙人的博客
04-12 1万+
BFC到底是什么东西 BFC 全称：Block Formatting Context， 名为 “块级格式化上下文”。 W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。 简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性 怎样触发BFC 这里.
BFC
qq_42164670的博客
03-28 137
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 BFC布局规则： 1.内部的Box会在垂直方向，一个接一个地放置。 2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 3.每个元素的margin box的左边， 与包...
说说BFC（Block Formatting Contexts，块级格式化上下文）
happyqyt的专栏
03-19 240
一、BFC是什么？ BFC是容器的一种属性，从样式上看，具有BFC的元素与普通的容器没有什么区别，但从功能上，具有BFC的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器没有的一些特性。 二、BFC的特性 1、BFC会阻止外边距折叠 即便两个块级元素相邻，但当它们不在同一个块级格式化上下文时它们的边距也不会折叠。 2、BFC可以包含浮动的...
BFC实现自适应两栏布局
01-20
**BFC（Block Formatting Contexts）** 是CSS布局中的一个重要概念，它定义了块级元素如何在其内部和周围元素交互。BFC可以帮助我们解决许多布局问题，比如**高度塌陷**，并能实现如自适应两栏布局等复杂的布局模式...
TensorFlow内存管理bfc算法实例
09-18
今天小编就为大家分享一篇TensorFlow内存管理bfc算法实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
10分钟理解CSS BFC原理及其应用
09-27
CSS BFC（Block Formatting Context，块级格式化上下文）是Web页面布局中的一个重要概念，它定义了一个独立的渲染区域，具有自己特定的布局规则。理解BFC的原理对于解决CSS布局问题和优化页面样式有着重要作用。 ...
BFC是什么
WJXYCWCXY的博客
08-06 188
BFC是什么，BFC可以解决的问题，外边距重叠问题
说一说BFC
m0_51221372的博客
04-16 620
BFC 定义、布局规则、如何创建BFC、BFC的作用
什么是BFC？
huahuahua__的博客
08-12 577
当初一开始学习CSS的时候就听说过BFC，跟浮动相关的，一直说什么触发BFC清除浮动，但是那时候我也没有具体去了解过BFC是什么东西，甚至不知道如何触发BFC，BFC的作用，只是照着别人清除浮动的方式来做。今天刚好又遇到了BFC，那么就来了解一下BFC到底是什么东西 什么是BFC 以下是MDN官方的定义 块格式化上下文（Block Formatting Context，BFC） 是Web页面的...
什么是BFC
IT修真院：初学者转行到互联网的聚集地
05-13 1484
这里是修真院web小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解web知识/技能，本篇分享的是： 【 什么是BFC】 大家好，我是IT修真院武汉第10期学院，一枚正直、纯洁、善良的前端程序员。 今天给大家分享一下，修真院官网任务task14，深度思考的知识点——什么是BFC。 1.背景介绍 B...
BFC到底是什么？
gx2124的博客
06-16 1150
经常听到说“触发BFC”的说法，那BFC到底是什么呢？今天好好总结了一下。
css中的BFC是什么
最新发布
06-06
BFC，即块级格式化上下文（Block Formatting Context），是 CSS 中的一个概念，用于控制块级元素的布局和浮动元素的交互行为。 BFC 是一个独立的渲染区域，具有一定的属性和行为，它内部的元素按照一定的规则进行布局。在 BFC 中，每个盒子的左外边缘（margin-left）会触碰到容器的左边缘（对于从右到左的格式化，右外边缘会触碰到右边缘），即使存在浮动也是如此。 BFC 的触发条件： - 根元素（html） - float 不为 none - position 为 absolute 或 fixed - display 为 inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid 或 table-column 等 CSS3 属性 - overflow 不为 visible BFC 的主要作用: - 清除浮动：在 BFC 中，浮动元素会被包裹在一个矩形框中，不会影响到外部元素的布局，从而可以解决父元素高度塌陷的问题。 - 防止 margin 重叠：在 BFC 中，相邻元素的 margin 会被分开，不会发生重叠的现象。 - 控制元素的布局：在 BFC 中，元素的布局是相对独立的，不会受到外部元素的影响，从而可以控制元素的位置和尺寸。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值