BFC(块级格式化上下文)

已于 2022-03-30 09:57:28 修改
阅读量75 收藏
点赞数
文章标签： javascript 前端 开发语言
于 2021-05-17 11:25:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36303110/article/details/116922187
版权

BFC(Block Fomatting Context) 块级格式化上下文

  • 形成独立的渲染区域，内部元素的渲染不会影响外界
  • 作用：
    1. 消除外边距重叠现象(同一个BFC的两个相邻Box的上下margin会发生重叠)
    2. 清除浮动(计算BFC的高度时，浮动元素也参与计算)
    3. 阻止元素被浮动元素覆盖
    4. 阻止子元素设置margin-top，父元素也一起掉下来
    <style>
  .box1 {
    margin-top: 300px;
    height: 600px;
    background-color: rebeccapurple;
  }
</style>
<div class="father">
  <div class="box1"></div>
</div>
    1. 自适应两栏布局(左边固定，右边自适应)
  • 触发BFC:
    1. float不为none
    2. position为absolute或者fixed
    3. overflow不为visible
    4. flex元素
    5. inline-block元素
<!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>
      /* 方案一 */
      html,
      body {
        padding: 0;
        margin: 0;
        height: 100%;
      }
      .box1 {
        float: left;
        width: 300px;
        height: 100%;
        background-color: green;
      }
      .box2 {
        float: left;
        width: calc(100% - 300px);
        height: 100%;
        background-color: blue;
      }

      /* 方案二: flex布局 */
      /* html {
        padding: 0;
        margin: 0;
        height: 100%;
      }
      body {
        padding: 0;
        margin: 0;
        height: 100%;
        display: flex;
        flex-direction: row;
      }
      .box1 {
        width: 300px;
        height: 100%;
        background-color: green;
      }

      .box2 {
        height: 100%;
        flex-grow: 1;
        background-color: blue;
      } */

      /* 方案三 触发bfc，但是宽度默认自适应*/
      /* html,
      body {
        padding: 0;
        margin: 0;
        height: 100%;
      }

      .box1 {
        float: left;
        width: 300px;
        height: 100%;
        background-color: green;
      }

      .box2 {
        overflow: hidden;
        height: 100%;
        background-color: blue;
      } */
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

清除浮动

  1. overflow:hidden;
  2. 内墙法/外墙法
  3. 伪元素清除
选择器::after{
   content:'';
   height:0;
   clear:both;
   display:none;
   visibility:none;
   overflow:hidden
 }
zvapour
关注
对 BFC 规范（块级格式化上下文：block formatting context）的理解？
liuhao9999的博客
03-23 464
相关知识点： 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒 子的区域，也是浮动元素与其他元素的交互限定区域。 通俗来讲 •BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。 •如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。 创建BFC （1）根元素或包含根元素的元素 （2）浮动元素float＝left|right或inh
BFC块级格式化上下文--小技巧
JackieDYH的博客
02-19 325
特性： （1）形成BFC的元素，会在垂直方向叠加margin （说明不形成BFC的话，父子元素和同级元素都会在垂直方向重叠margin） （2）形成BFC的元素，不会与浮动元素重叠 （3）形成BFC的元素，不会影响外面的布局；外面的布局也不会影响BFC内部布局 （4）形成BFC的元素的高度会将浮动元素计算在内。 形成BFC的条件 （1）根标签 （2）float不为none （...
解决左边宽度固定，右边宽度随浏览器自适应的3种方案
杏子
07-29 6331
解决左边宽度固定，右边宽度随浏览器调整的问题前言一、思路二、代码三、总结 前言 在前端开发中，不管是自己写项目，还是应试，都会遇到这样一个问题，左边宽度固定，右边宽度随浏览器的变化而变化，今天就来分享一下解决方案。 一、思路 二、代码 三、总结 ...
实现左侧固定宽度, 右侧自适应的两栏布局的八种方案
技术无止境，人生仍探索。
07-23 4915
HTML <!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" /> &lt
左边宽度固定，右边自适应
LuckXinXin的博客
05-24 1017
左侧固定宽度，右侧自适应宽度的两列布局实现 html结构 <div class="outer"> <div class="left">固定宽度</div> <div class="right">自适应宽度</div> </div> 在外层div（类名为outer）的div中，有两个子div，类名分别为left和right，其中left为固定宽度，而right为自适应宽度 方法1：左侧div设置成浮动：flo...
左边固定，右边自适应及左边自适应，右边固定布局的几种方法
遇见更好的自己
09-09 1580
自适应布局在现在的布局中，很容易遇见，下面是在平时工作中对左边固定，右边自适应及左边自适应，右边固定布局的几种方法的一些总结，希望能帮到大家，如果大家有更多更好的意见，欢迎补充！ 页面布局如下： 一、左边固定，右边自适应的布局 1. 左边左浮动，右边加个overflow:hidden;    #lt{ float: left;width:200px; backg
左边宽度固定，右边自适应布局
笑望灬星辰
04-12 406
左边宽度固定，右边自适应布局 html结构 <div class="outer"> <div class="left">固定宽度</div> <div class="right">⾃适应宽度</div> </div> 在外层 div （类名为 outer ）的 div 中，有两个⼦ div ，类名分别为 left 和 right ，其中 left 为固定宽度，⽽ right 为⾃适应宽度 方法1：左侧div设置成浮动：floa
CSS理解块级格式上下文（BFC）
09-24
【CSS理解块级格式上下文（BFC）】 在CSS布局中，Block Formatting Context（BFC）是一个至关重要的概念，它决定了元素内部块级元素的布局方式，同时保证了这个区域与外部元素的布局互不影响。BFC可以看作是一个...
深入理解前端面试关键：BFC块级格式化上下文
"前端大厂最新面试题-BFC" 在前端开发中，Block Formatting Context (BFC) 是一个至关重要的概念，它涉及到网页布局和样式计算。BFC 是页面渲染时的一个独立区域，其中的元素按照特定规则进行排列，而这些规则与...
前端CSS理解 —— BFC(块级格式化上下文)
最新发布
upgrade_bro的博客
08-04 202
BFC即 Block Formatting Contexts (块级格式化上下文)，BFC是指浏览器中创建了一个独立的渲染区域（内部元素的渲染不会影响边界以外的元素）。应用BFC可以避免margin折叠、清除浮动……
css左边容器固定宽度，右边自适应的几种效果
Cryday的小屋
11-01 4904
内容代码如下： &lt;div class="container"&gt;     &lt;div class="left"&gt;&lt;/div&gt;     &lt;div class="right"&gt;&lt;/div&gt; &lt;/div&gt; 第一种：         .left {             float: l
css实现右侧固定宽度，左侧宽度自适应
徐同保的专栏
11-29 4911
如果使用float做固定宽度的div，这个div要写在自适应div的前面，不然后导致两个div不在同一行，这是用float的弊端absolute可以解决这个问题，但是使用absolute时，如果固定宽带的div比较高，会影响后面的布局所以还需要使用float，一个向左浮动，一个向右浮动，自适应的div里还要再添加一个div，很复杂的最终方案：&lt;!DOCTYPE html&gt; &l...
总结几种实现右边宽度固定，左边宽度自适应的css布局
热门推荐
weixin_34364979的博客
03-07 1万+
一.display:table-cell的应用首先是简单的html：下面是css代码：          以下是效果图：必须注意的是，左侧div必须设置超过父元素减去右侧元素的宽度   但是这个方法会产生一个问题，它会使左边的div高度等于右侧div的高度 二.flex布局同样使用上面的htmldai'ma下面是css代码效果图如下：可以看到左侧的没有设置宽度，但是却跟右侧的宽度一致，实现了宽度自...
左侧固定，右侧宽度自适应
cindy_rain的博客
11-20 1836
这里用到两种方法实现实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 。每个例子我都用两幅图对比效果。黄色部分的宽度就是大框架的宽度，我们可以看到红色区域不发生改变，红色区域随着黄色区域宽度的改变而改变。 html部分<div class="box1"> <div class="divA">DIVA</div> <div class="divB">
实现左边固定宽度右边自适应布局
行言Tang、
06-07 431
第一种        #box{width: 100%;background: red;overflow:hidden;}        #lef{float:left;width: 300px;height: 300px;background: blue;}        #rig{margin-left: 310px;background: pink;height: 500px;}
左侧固定宽右侧自适应（CSS布局面试题）
szy1000的专栏
06-08 9417
左侧固定宽度，右边自适应 这是一个很常用的css布局，尤其是在后台页面当中，使用频繁。
右边固定宽度，左边自适应
前端晓栈的博客
02-23 511
右边固定宽度，左边自适应
经典面试题（一）：俩个div并排，左边div固定宽度，右边宽度自适应
飞天代码的博客
11-23 6718
在地铁上无聊看到一个面试帖子，“俩个div并排，左边div固定宽度，右边宽度自适应”，至少列出4种。 嗡，写了这么多年代码，竟然只能列出2种。回来还是写几个例子验证下。 方式一：BFC(块级格式化上下文) 思路：左边定宽，右边采用 overflow: hidden; /* 触发bfc */ 代码： &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&a
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值