BFC 的原理和功能
BFC 的含义
BFC（block formatting context）块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，BFC 提供了一个环境，HTML 元素在这个环境中按照一定规则进行布局；
具有 BFC 特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的的一些特性；
BFC 是一个独立的布局环境，内部的元素布局与外部互不影响；
BFC 的布局规则
内部的 Box 会在垂直方向，一个个地放置，Box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的上下 margin 会发生重叠，每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
BFC 的区域不会与浮动 Box 重叠；
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
计算 BFC 的高度时，浮动元素也参与计算；
触发 BFC 的条件
-
常见的方式：
元素或属性 属性值 float left、right postion absolute、fixed overflow auto、scroll、hidden display inline-block、table-cell、flex、grid、flow-root、…
BFC 的用处
让浮动内容和周围的内容等高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>让浮动内容和周围的内容等高</title>
<style>
.box1 {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
/*
* BFC 的区域不会与 float box 重叠；
* 计算 BFC 的高度时，浮动元素也参与计算；
*/
overflow: hidden;
}
.float1 {
width: 200px;
height: 150px;
background-color: white;
border: 1px solid black;
padding: 10px;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="float1">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
</body>
</html>
I am content inside the container.
外边距折叠
原因：Box 垂直方向的距离由 margin 决定；属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠；
解决方法：给上 box 或者下 box 任意一个包裹新的 box 并开启 BFC；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外边距折叠</title>
<style>
.p1,.p2 {
color: #f55 !important;
background: #fcc !important;
width: 200px !important;
line-height: 100px !important;
text-align: center !important;
}
.p1 {
margin-bottom: 20px !important;
}
.p2 {
margin-top: 30px !important;
}
.box {
/*
* 盒子垂直方向的距离由 margin 决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
* 使用box 将同处在同一个bfc下的两个 p标签 分开，破坏原来的bfc
*/
overflow: hidden !important;
}
</style>
</head>
<body>
<p class="p1">你好</p>
<div class="box">
<p class="p2">你好</p>
</div>
</body>
</html>
你好
你好
清除浮动
解决方法：给父元素开启 BFC；
原理：计算 BFC 的高度时，浮动子元素也参与计算；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动</title>
<style>
.container33 {
width: 300px;
border: 5px solid #fcc;
overflow: hidden;
}
.box33 {
width: 100px;
height: 100px;
float: left;
border: 5px solid #f66;
}
.test{
padding: 10px 0;
background: #eee;
}
</style>
</head>
<body>
<div class="container33">
<div class="box33"></div>
<div class="box33"></div>
</div>
<div class="test">用来测试是否清除了浮动</div>
</body>
</html>
自适应的两列布局
解决方法：给父元素开启 BFC；
原理：BFC 的区域不会与浮动 box 重叠；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应两栏布局</title>
<style>
/*
* 两大css原理：
* 1.层叠上下文 - 层叠顺序 浮动 > 块状
* 2.BFC - 元素不会与浮动元素产生重叠
*/
.aside11 {
float: left;
width: 100px;
height: 150px;
background: #f66;
}
.main11 {
overflow: auto;
height: 200px;
background: #fcc;
}
</style>
</head>
<body>
<div class="aside11"></div>
<div class="main11"></div>
</body>
</html>
IFC 的原理和功能
IFC 的含义
IFC(inline Formatting Context）叫做 内联格式化上下文；
内部的元素从包含块的顶部开始，从左至右(默认)排列成一行形成的一个矩形盒子叫做 line box；
IFC 的布局规则
box 是水平一个接一个的排列，水平的 margin、padding，border 是可以有的；
垂直方向的对齐，可能是底部对齐，顶部对齐，也可能是基线对齐（这个是默认的）；
行框中的内联 box 的高度小于行框的高度时，内联盒子的垂直方向的对齐方式取决于 vertical-align 属性；
当一个行框水平不能容纳内联 box 时，将会在垂直方向上产生多个行框，上下一个挨着一个，但是不会重叠；
多个内联盒子的宽度小于包含他们的行框时，在水平方向的分布取决于 text-align 属性；
IFC 的作用
水平居中
<style>
.box_0 {
width: 500px;
height: 100px;
background-color: rosybrown;
text-align: center;
}
.child_0 {
display: inline-block;
width: 80px;
height: 50px;
background-color: seagreen;
}
</style>
<div class="box_0">
<div class="child_0"></div>
<div class="child_0"></div>
</div>
垂直居中
<style>
.box_1 {
width: 500px;
background-color: rosybrown;
display: inline-block;
}
.child_1 {
display: inline-block;
width: 80px;
height: 50px;
background-color: seagreen;
vertical-align: middle;
}
</style>
<div class="box_1">
<div class="child_1"></div>
<div class="child_1" style="height: 100px;"></div>
</div>
CSS 高级✍️ position 定位
上一篇
