BFC

简介: 准面试题,这里简洁阐述了,帮助快速复习、加深记忆

v2-98fefb7b8d9738f3d1e53eabaa1209c2_720w.jpeg

BFC(Block formatting context),块级格式化上下文。它是 CSS 中一种强大的布局概念,它提供了一种隔离和控制元素布局的机制。

BFC的特性

1、独立渲染区域。

具有 BFC 特性的元素拥有独立的渲染区域,可以看作是一个容器,容器内部的元素不会影响到外部容器。

<div style="width: 100%">
    <div style="width: 100px; height: 50px; float: left; background-color: red; color: #ffffff;">box1</div>
    <div style="background-color: blue; color: #ffffff;">
        box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、
        box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、
        box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、box2
    </div>
</div>

box1 和 box2 处于不同的 BFC 中,box2 的内容不会影响到 box1 的位置。

2、边距重叠的处理。

在同一个 BFC 中,垂直相邻的子元素的边距会发生重叠,取两个边距中的最大值。

<div style="width: 100%">
    <div style="width: 50px; height: 50px; margin: 100px; background-color: red; color: #ffffff;">box1</div>
    <div style="width: 50px; height: 50px; margin: 50px; background-color: red; color: #ffffff;">box1</div>
</div>

box1 和 box2 处于同一个 BFC 中,它们的垂直边距发生了重叠,取最大值。

如果想要禁止发生重叠,可在子元素上增加父元素。

3、清除浮动。

BFC 可以用于清除浮动。在开发过程中,我们会遇到需要清除浮动的操作,而各种清除浮动的方法实质上都是基于BFC的原理。详解如下。

<div style="border: 1px solid red;">
    <div style="width: 50px;height: 50px;background: blue;float: left;"></div>
</div>

为什么会出现这种情况呢?主要是由于浮动的块状元素会脱离文档流,从而导致父元素未包裹住浮动元素。

我们可以添加 overflow: hidden 属性禁止子元素脱离父元素(超出后隐藏)。

<div style="border: 1px solid red; overflow: hidden;">
    <div style="width: 50px; height: 50px; background: blue; float: left;"></div>
</div>

BFC的布局规则

  1. BFC 内部的子元素会在垂直方向上依次放置。

  2. BFC 内部的两个垂直相邻的子元素边距(margin)会发生重叠,最终会取边距(margin)的最大值。

  3. BFC 是页面上的一个隔离的独立容器,容器内部的子元素不会影响到外部的元素。

  4. BFC 不会与已经浮动(float)的元素发生重叠。

  5. 计算 BFC 的高度时,浮动元素也会参与计算。

如何生成BFC

通过设置元素的某些属性:

  1. float:left、right

  2. overflow:auto、hidden

  3. position:absolute、fixed

  4. display:inline-block、flex、inline-flex、table-cell、table-caption

BFC的常见应用场景

  1. 清除浮动:通过创建BFC,可以解决浮动元素造成的父容器无法包裹的问题,避免布局崩塌。
  2. 解决边距重叠:在某些情况下,我们可以利用BFC特性来避免边距重叠的问题,提高布局的可控性。
  3. 制作多栏布局:利用BFC的特性,我们可以实现多栏布局,每个栏目的高度可以独立自适应,不会相互影响。
  4. 解决文字环绕问题:通过创建BFC,可以让文本环绕浮动元素或其他元素,实现更灵活的页面布局效果。
目录
相关文章
|
5月前
|
容器
BFC 是什么
BFC 是什么
29 0
|
9月前
|
前端开发 容器
【对BFC的详解】
【对BFC的详解】
|
10月前
|
前端开发 容器
浅谈BFC
浅谈BFC
55 1
|
10月前
|
前端开发
BFC是什么?怎么触发BFC?
BFC是“块级格式化上下文”的缩写,是一个独立的渲染区域,内部的元素按照一定规则进行布局,不会影响到外部元素的布局。BFC主要用于解决一些常见的布局问题,例如清除浮动、防止 margin 重叠等。
|
前端开发 JavaScript
了解BFC特性,轻松实现自适应布局
BFC(Block Formatting Context)俗称块级格式上下文,初次看到这词似乎有点不是很理解,通俗解释就是一个独立区域决定了内部元素的排放,以及内部元素与外部元素的相互作用关系
110 0
了解BFC特性,轻松实现自适应布局
|
前端开发 容器
浅谈BFC
大家好,我是 CoderBin,本文讲给大家分享 CSS 中关于 BFC 的相关内容,如果文中有任何不对的地方欢迎在评论区留言指正,如果对同学们有帮助的欢迎点赞收藏,你们的支持就是我最大的动力,谢谢🌻
110 1
浅谈BFC
|
前端开发
BFC 原理
首先我们了解下何为** BFC** bfc:Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
|
前端开发 数据可视化 容器
关于BFC理解
BFC(Block Formatting Context,块格式上下文)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。对其的理解能够帮你更好的布局页面。
关于BFC理解