格式化上下文——BFC和IFC

小小潘不放弃

已于 2022-03-11 11:13:59 修改

阅读量198

点赞数

分类专栏： CSS进阶文章标签： css html 前端 web开发

于 2022-03-03 12:30:00 首次发布

本文链接：https://blog.csdn.net/qq_57220516/article/details/123227991

版权

CSS进阶专栏收录该内容

10 篇文章 0 订阅

订阅专栏

格式化上下文

格式化上下文是指页面中的一块渲染区域，决定了其内部元素将如何定位以及和其他元素的关系。即有一套自己的渲染规则。格式化上下文有以下两种类型：

块级格式化上下文：Block Formatting context，简称BFC
行级格式化上下文：Inline Formatting context，简称IFC

BFC

BFC的特点

在一个BFC内部，盒子会在垂直方向一个接一个排布
在一个BFC内部，相邻的margin-top和margin-bottom会叠加
在一个BFC内部，每一个元素的左外边界会紧贴包含盒子容器的左边，包括浮动的情况
在一个BFC内部，如果存在一个新的BFC，该BFC区域不会与浮动元素重叠
BFC相当一一个隔离，内部如何排列不会对外部有任何影响
计算BFC高度时，内部浮动元素也会参与计算。

创建BFC的方式

根元素
float属性为left或right
overflow属性不为visibility
position为absolute或fixed
元素类型为inline-block，table-cell或table-caption

BFC的应用

避免垂直外边距叠加

如果两个盒子在同一个BFC里面，那么垂直方向的外边距就会发生叠加，像下面的例子：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
	.top{
		background-color:yellowgreen;
		width:200px;
		height:50px;
		margin-bottom:25px;
	}
	.bottom{
		background-color:yellow;
		width:200px;
		height:50px;
		margin-top:25px;
	}
  </style>
 </head>
 <body>
 <!-- 在同一个根元素下 -->
	<div class="top"></div>
	<div class="bottom"></div>
 </body>
</html>

在这里插入图片描述
如何解决呢？
其实很简单，只需要让这两个盒子处在不同的BFC中就可以了。将代码修改成下面这样，增加一个盒子，设置overflow：hidden属性。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
	.top{
		background-color:yellowgreen;
		width:200px;
		height:50px;
		margin-bottom:25px;
		overflow: hidden;
	}
	.middle{
		overflow: hidden;
	}
	.bottom{
		background-color:yellow;
		width:200px;
		height:50px;
		margin-top:25px;
	}
  </style>
 </head>
 <body>
	<div class="top"></div>
	<div class="middle">
		<div class="bottom"></div>
	</div>
 </body>
</html>

在这里插入图片描述

清除浮动

包含浮动
避免文字环绕

包含浮动

前面讲过父元素坍塌的问题，当子元素设置浮动，父元素的高度没有设置或者比其中一个子元素高度小时，就会导致这个问题。例如下例坍塌：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
	.father{
		background-color:yellowgreen;
		width:200px;
		height:60px;
	}
	.son1{
		background-color:yellow;
		width:60px;
		height:80px;
		float:left;
	}
	.son2{
		background-color:bisque;
		width:60px;
		height:80px;
		float:right;
	}
  </style>
 </head>
 <body>
	<div class="father">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>
	</body>
</html>

在这里插入图片描述
解决方法就是给父元素增加overflow:hidden属性，使其变成一个BFC，这样在计算高度的时候会把浮动元素也计算进去。

解决文字环绕问题

一般情况下，当我们设置浮动是，往往会有如下所示的文字环绕问题：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
	.father{
		background-color:yellowgreen;
		width:200px;
		overflow: hidden;
	}
	.son{
		background-color:yellow;
		width:60px;
		height:80px;
		float:left;
	}
  </style>
 </head>
 <body>
	<div class="father">
		<div class="son"></div>
		格式化上下文是指页面中的一块渲染区域，决定了其内部元素将如何定位以及和其他元素的关系。即有一套自己的渲染规则.
	</div>
	</body>
</html>

在这里插入图片描述
解决办法就是把内容部分变成一个BFC

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
	.father{
		background-color:yellowgreen;
		width:200px;
		overflow: hidden;
	}
	.son{
		background-color:yellow;
		width:60px;
		height:80px;
		float:left;
	}
	.content{
		background-color:burlywood;
		overflow: hidden;
	}
  </style>
 </head>
 <body>
	<div class="father">
		<div class="son"></div>
		<div class="content">
			格式化上下文是指页面中的一块渲染区域，决定了其内部元素将如何定位以及和其他元素的关系。即有一套自己的渲染规则.
		</div>
	</div>
	</body>
</html>

在这里插入图片描述

自适应两栏布局

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
	.left{
		background-color:yellow;
		width:80px;
		height:120px;
		float:left;
	}
	.right{
		background-color:burlywood;
		height:120px;
		overflow: hidden;
	}
  </style>
 </head>
 <body>
	<div class="left"></div>
	<div class="right"></div>
	</body>
</html>

在这里插入图片描述

小小潘不放弃

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
格式化上下文——BFC和IFC

格式化上下文格式化上下文是指页面中的一块渲染区域，决定了其内部元素将如何定位以及和其他元素的关系。即有一套自己的渲染规则。格式化上下文有以下两种类型：块级格式化上下文：Block Formatting context，简称BFC行级格式化上下文：Inline Formatting context，简称IFCBFCBFC的特点在一个BFC内部，盒子会在垂直方向一个接一个排布在一个BFC内部，相邻的margin-top和margin-bottom会叠加在一个BFC内部，每一个元素的左外边界
复制链接

扫一扫

专栏目录