前端基础——BFC

Charming&M

已于 2022-04-13 08:49:10 修改

阅读量540

点赞数

分类专栏：前端开发文章标签： css html5

于 2022-04-09 11:22:20 首次发布

本文链接：https://blog.csdn.net/qq_41721660/article/details/124055145

版权

前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细解读了BFC（块级格式化上下文）和IFC（行内格式化上下文）的概念，介绍了它们如何影响元素布局，包括行盒的特性、如何创建BFC、应用场景以及关键的CSS属性。了解这些有助于提升网页布局的控制力。

摘要由CSDN通过智能技术生成

文章目录

1.FC

概念
FC(Formating context)格式化上下文，是css2.1提出的一个视觉渲染的概念。它是页面中一块渲染的区域，并且有一套自己的渲染规则，它决定了其子元素如何排列，以及和其他元素之间的相互关系

2.BFC

BFC--block formating context：块级格式化上下文，BFC是页面中的一个块级渲染区域。

概念：
指的是页面中的一个标签，不一定是块级标签。要成为BFC，有指定的满足条件。BFC有自己的排列规范，决定了BFC区域的子元素如何排列，以及与其他元素之间的相互关系
BFC区域的特点：
- 内部的box会在垂直方向上一个接一个显示（因为标准文档流也是这样排列，其实标准文档流也在BFC区域里面）
- box垂直方向上的距离由margin决定，属于同一个BFC的两个相邻的盒子的margin会发生重叠（在标准文档流中垂直方向不是取最大的Margin吗？——是呀！因为重叠了所以才会取最大值呀！）。而属于不同的BFC区域的盒子在垂直方向上不发生重叠
- 对于从左往右排列的FC来说，每个元素的左外边缘（margin-left）与包含块的左边相接触。即使在浮动中也是如此，除非这个元素自己形成了一个新的BFC区域。
- BFC区域不会与float box重叠
- BFC区域就是页面上一个独立的容器，容器里面的元素不会影响外面的元素，反之亦然。
- 计算BFC高度时，浮动元素也会参与计算——该特点可以解决子元素浮动而父元素高度塌陷的问题。
如何成为BFC区域？
- 根标签html就是一个BFC容器；
- 脱离文档流：float不为none、绝对定位和固定定位
- dispaly为inline-block、table-cell、table-caption、flex（弹性盒子）
- overflow不为visible
  BFC应用场景
场景一：对于从左往右排列的FC来说，每个元素的左外边缘（margin-left）与包含块的左边相接触。即使在浮动中也是如此，除非这个元素自己形成了一个新的BFC区域。

body{
            border: 1px solid red;
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: pink;
            float:left
        }
        .box2{
            height: 200px;
            background-color: tomato;
        }

在这里插入图片描述
若box2为一个新的BFC容器（采用float:left），则不会与块的左边相接触，效果图如下：

当box2设置浮动时，其宽度会根据文本内容自适应，而当设置第二个盒子溢出隐藏时，box2会自适应页面，效果图如下：
在这里插入图片描述

应用场景二：三列布局——左右两侧固定不动，中间列自适应。特点相关：BFC区域不会与float box重叠

body{
            border: 1px solid red;
        }
        .left{
            width: 300px;
            height: 200px;
            background-color: pink;
            float: left;
        }
        .right{
            width: 300px;
            height: 200px;
            background-color: tomato;
            float: right;
        }
        .center{
            height: 300px;
            background-color: lightblue;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!-- 先左右两边浮动，再将中间的盒子重新设为BFC区域，
    不与float box重叠，利用overflow:hidden实现页面自适应 -->
    <div class="left">box1</div>
    <div class="right">box2</div>
    <div class="center">box2</div>
</body>

效果图如下：
在这里插入图片描述

应用场景三：计算BFC高度时，浮动元素也会参与计算——该特点可以解决子元素浮动而父元素高度塌陷的问题。
直接将父元素生成BFC区域即可。比如：dispaly:flex; overflow:hidden等
应用场景四：box垂直方向上的距离由margin决定，属于同一个BFC的两个相邻的盒子的margin会发生重叠，不同BFC盒子的margin不发生重叠

<style>
        body{
            border: 1px solid red;
        }
        .left{
            width: 300px;
            height: 200px;
            background-color: pink;
            margin-bottom: 50px;
        }
        .right{
            width: 300px;
            height: 200px;
            background-color: tomato;
            margin-top: 100px;
        }
        .container{
            overflow: hidden;
        }
    </style>

<body>
    <div class="left">box1</div>
    <!-- 因为仅仅left和right盒子都是在html这个BFC容器当中，因此会
    出现margin高度覆盖的情况，因此需要新建一个BFC容器，即新建一个
    盒子来生成BFC区域，生成的方法采用的是overflow:hidden -->
    <div class="container">
        <div class="right"></div>
    </div>
</body>

在这里插入图片描述

3. IFC

概念
IFC--inline formating context：和BFC一样，是css.2提出的视觉渲染的概念。称为行内格式化上下文，指的是一行区域的渲染规则，确定了一行中行级元素如何进行排列以及对齐
IFC特点
- 在IFC中，盒子水平放置，一个接着一个，从顶部开始；
- 盒子之间的margin和padding在水平方向有效；
- 这些盒子可以通过不同的方式进行对齐，包括顶线对齐、中线对齐、基线对齐以及底线对齐；

4. 行盒

整个一行的渲染区域就叫行盒
行盒的宽度由内容的总宽度决定，包括浮动；
行盒的高度由一行中内容高度决定，由行内元素最高点和最低点距离计算得出

5. 影响行盒布局的css属性

font-size：字体越大，行盒越高，行盒高度由最大的字体大小决定；
font-family：不同字体类型行盒高度不同，行盒高度由最高的那个类型决定；
height/line-height
vertical-align：设置当前行级元素在垂直方向上的对齐方式
- baseline：参考基线对齐
- middle：中线对齐
- top：顶线对齐
- bottom：底线对齐

文本之间：文本默认参考基线对齐
文本和图片之间：默认文本的基线和图片的底部对齐，
表格：设置表格中单元格内容在垂直方向上的对齐方式，三个取值：top/middle/bottom
表格边框合并为1：border-collapse:collapse;

Charming&M

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端基础——BFC

FC概念FC(Formating context)格式化上下文，是css2.1提出的一个视觉渲染的概念。它是页面中一块渲染的区域，并且有一套自己的渲染规则，它决定了其子元素如何排列，以及和其他元素之间的相互关系BFCBFC--block formating context：块级格式化上下文，BFC是页面中的一个块级渲染区域。概念：指的是页面中的一个标签，不一定是块级标签。要成为BFC，有指定的满足条件。BFC有自己的排列规范，决定了BFC区域的子元素如何排列，以及与其他元素之间的相互关系
复制链接

扫一扫

专栏目录