CSS中的BFC学习

最新推荐文章于 2024-07-06 16:25:37 发布

小哈雷星

最新推荐文章于 2024-07-06 16:25:37 发布

阅读量67

点赞数

分类专栏：学习笔记文章标签： css 学习前端

本文链接：https://blog.csdn.net/wzzjswx/article/details/132405231

版权

学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.什么是BFC

BFC（Block Formatting Context）翻译为块级格式化上下文。可以理解为在页面独立出一块渲染区，在渲染区内，它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用。

换句话说，BFC就是为元素提供一个独立容器，在该容器里，按照一定的规则进行布局排列，该容器内的元素不会影响外部的元素，同理，外部的元素也不会影响内部的元素。

二.BFC的特性

每个BFC区域只包含其子元素，不包含子元素的子元素
每个BFC区域相互独立，互不影响

三.BFC的形成条件

根元素(<html>).
浮动元素，float 除 none 以外的值.
绝对定位元素，position为 absolute 或 fixed.
display 为 inline-block、table-cell、table-caption、table、table-row、table-row-groutable-header-group、table-footer-group、inline-table、flow-root、flex 或 inline-flex、grid 或 inline-grid
overflow 除了 visible 以外的值 hidden、auto、scroll.
contain 值为 layout、content、paint

四.适用范围

1.清除浮动(高度塌陷)

.container{
    border: 1px solid red; //方便观察父元素
    background: #63b1d2;
}
.box{
    float:left;
    width:200px;
    height:200px;
    background: #56a979;
}

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

这个是很常见的一个例子，因为我们给子元素添加了 float 浮动，使子元素脱离了文档流，父元素无法统计子元素的大小。同时也没有给父元素设置 height(扩展性不好)，才导致这个问题。因此我们通常会给父元素添加 overflow: hidden 用来清除浮动。

.container{
    border: 1px solid red;
    background: #63b1d2;
    overflow: hidden;
}
.box{
    float:left;
    width:200px;
    height:200px;
    background: #56a979;
}

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

另外在说一下其他清除浮动的方法

给最后一个子元素的后面添加一个空标签，定义样式 clear:both(坏处是增加了个无意义标签)
给父元素添加一定的高度 (扩展性不好)

2. 外边距重叠

常见的一般都是垂直方向的 margin 重叠,问题如下。

.box{
    width:200px;
    height: 200px;
    margin:20px;
    background: #56a979;         
}

<div class="Conbox">
    <div class="box"></div>
    <div class="box"></div>
</div>

上下两个子元素的间隔并不是想象的(上子元素的margin-bottom + 下子元素的margin-top)的大小40px;而是单个子元素的margin值20px，如果把下面子元素的margin单独设为30px，那么就会发现，两个子元素的间隔会变为30px。多次修改尝试，发现两个子元素的间隔一直都是margin设置的最大的那个值。

解决该问题的办法可以根据BFC的特性，至少把一个子元素放到BFC的独立容器里面，这样，容器里面的子元素不会影响外面元素，也不受外面元素的影响。

.container{
    overflow:hidden;
}
.box{
	background: #56a979;
	width: 200px;
	height: 200px;
	margin:20px;
}

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

在写示例时，突然发现一个问题，在上面的代码中，如果没有在 .container的样式中添加 overflow:hidden，也就是没有变为BFC独立容器，那么当前 .container 容器的高度为多少？现在已知box的高度为200px,另外又加了个20px的margin。

直接出答案：子元素的高度200px。

添加 overflow:hidden 样式后高度为：子元素的高200px + 上/下边距 *2 = 240px;

3.margin-top塌陷

.container{
    width:300px;
    height:300px;
    background:#63bad2
}
.box{
    width:200px;
    height:200px;
    margin-top:20px;
    background:#56a979
}

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

在给子元素添加 margin-top 样式前，两个容器都紧贴最上层边框，现在给子元素添加margin-top 样式，想使子元素距上边框有个20px的间距，父元素还是紧贴上边框。但是实际效果是父元素依然跟子元素平齐，并同时据上边框20px。

现在给父元素添加 overflow:hidden 样式可以解决该问题。(给父元素添加一个不为0的border也能解决该问题)

4.浮动元素的遮盖

.box1{
	width: 100px;
	height: 100px;
	background: #56a979;
	float: left;
}
.box2{
	width: 200px;
	height: 200px;
	background: #63b1d2;
} 

<div class="box1"></div>
<div class="box2"></div>

如果想浮动的元素不在遮盖其他的元素，可以在后面的一个元素添加 overflow:hidden 即可。

5.文字环绕

.container{
    width:300px;
    height:300px;
    background:#63b1d2
}
.box{
    width:200px;
    height:200px;
    background:#56a979
    float:left
}

<div class="container">
	<div class="box"></div>
	<div>JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，</div>
</div>

这个问题可以算上面问题的补充，浮动元素跟带有文字的元素组合，理论上浮动元素脱离了正常的文档流，应该会覆盖住别的元素内容，但是实际效果确实文字包裹住了浮动元素.

解决这个问题也简单。给文字元素添加overflow: hidden;

小哈雷星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS中的BFC学习

BFC（Block Formatting Context）翻译为块级格式化上下文。可以理解为在页面独立出一块渲染区，在渲染区内，它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用。换句话说，BFC就是为元素提供一个独立容器，在该容器里，按照一定的规则进行布局排列，该容器内的元素不会影响外部的元素，同理，外部的元素也不会影响内部的元素。
复制链接

扫一扫