BFC和IFC

最新推荐文章于 2024-05-19 10:40:38 发布

年木

最新推荐文章于 2024-05-19 10:40:38 发布

阅读量324

点赞数

分类专栏：前端基础三件套文章标签： css html 前端

本文链接：https://blog.csdn.net/yzj_xxj/article/details/126186694

版权

前端基础三件套专栏收录该内容

7 篇文章 0 订阅

订阅专栏

BFC和IFC

什么是FC？

FC（formating context）格式化上下文，是css2.1提出的一个概念

它是页面中的一块渲染区域，并且有一套渲染规则，它决定了子元素如何排列，以及和其他元素的相互关系和相互作用。

常见的FC分为：

BFC（block formating context）和IFC（ inline formating context），他是css提出的一种视觉渲染的概念。

BFC

通常称之为块级格式化上下文

（指页面上的一个标签，但是不一定完全是块级元素。它有指定的满足条件，它有自己的渲染规则，决定了BFC的内部的HTML标签是如何进行定位以及不同的BFC之间如何进行定位。）

就是BFC区域的特点：

内部的盒子会在垂直方向上，一个接着一个地放置（标准文档流）
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会产生重叠
- 属于不同的BFC区域的两个相邻的box的margin就不会发生重叠
- 解决方案：把其中一个box放到一个新BFC区域可以解决margin重叠的问题
每个元素的左外边缘与包含块的左边相接触（从左到右的格式化，否则相反）。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。（解决浮动元素与非浮动元素的重叠）
BFC的区域不会和浮动盒子重叠
计算BFC区域的高度时，浮动元素也参与计算
- 可以解决子元素浮动父元素高度塌陷的问题
BFC 就是页面中一个独立的容器，容器里面的子元素不会影响外面元素，反之也如此

如何变成BFC容器或者说（如何升级为BFC）或者说（产生BFC的方法）

设置overflow 不为 visible 通常：overflow:hidden
设置position为absolute和fixed（脱离文档流）
设置float不为none（脱离文档流）
设置display为inline-block、flex
html 根标签（html本身就是一个BFC容器）

BFC应用场景（能解决什么问题）

场景一：margin垂直方向重叠问题

将相邻的两个盒子中的一个盒子放在一个新的BFC区域里，就可以解决margin重叠的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: tomato;
            margin-bottom: 20px;
        }
        .box2{
            width: 20die0px;
            height: 200px;
            background-color: pink;
            margin-top: 50px;
        }
        .container{
        /*创建BFC容器 解决margin重叠问题*/    
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="container">
        <div class="box2"></div>
    </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">
    <title>Document</title>
    <style>
        .container{
            width: 1200px;
            height: 600px;
            border: 1px solid red;
        }
        .aside{
            width: 200px;
            height: 300px;
            background-color: pink;
            float: left;
        }
        .article{
            /* width: 800px; */
            height: 400px;
            background-color: tomato;
            /* 新的BFC区域不会和浮动元素重叠 */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="aside"></div>
        <div class="article"></div>
    </div>
</body>
</html>

场景3：三栏布局 m.jd.com

对于两栏或三栏的自适应布局，包含块的特点，BFC区域不会和浮动元素重叠

方法：html代码结构中，居中盒子需要放在最后，左右两个盒子分别设置左浮动和左浮动，居中盒子设置成BFC容器

<style>
        .wrapper .left {
            float: left;
            width: 200px;
            height: 100px;
            background-color: red;
        }

        .wrapper .center {
            background-color: gray;
            height: 300px;
            overflow: hidden;
        }

        .wrapper .right {
            float: right;
            width: 200px;
            height: 150px;
            background-color: orange;
        }
</style>
<div class="container">
	<!-- 前面两个盒子一个左浮动，一个右浮动，中间盒子放最后，设置成BFC容器 -->
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>

场景四：子元素浮动，父元素高度塌陷的问题

计算BFC区域的高度时，浮动元素也参与计算

子元素浮动，将父元素设置为BFC区域，父元素计算高度时，子元素也会计算进去

<style>
.all-children-float{
border: 1px saddlebrown solid;
   overflow: hidden;
}
.all-children-float .left {
float: left;
width: 200px;
height: 100px;
background-color:red;
}
.all-children-float .right {
float: right;
width: 200px;
height: 150px;
background-color:orange;
}
</style>
<div class="all-children-float">
	<div class="left"></div>
	<div class="right"></div>
</div>

BFC的理解

BFC概念：BFC是W3C提出一种元素排列规则，只要当前这个盒子是BFC盒子，那就要满足一些排列规范
BFC容器创建了一个独立的空间，这个空间在页面上有一套自己的渲染规则，我们可以使用float、overflow、diplay:inline-block等等创建BFC容器
浮动元素和标准文档流的元素默认会重叠，但是给标准文档流的元素设置BFC，那浮动元素就会和BFC容器一行排列，

同一容器中的margin会重叠，可以让两个重叠的元素在不同的BFC空间解决

子元素浮动，父元素高度塌陷，使用BFC解决高度塌陷问题

请描述下三栏式布局？