格式化上下文
格式化上下文的概念主要是包含了块格式化上下文、内联格式化上下文和灵活格式化上下文，三种上下文。
1、块格式化上下文（BFC）
文档最外层元素使用块布局规则或称为初始块格式上下文。这意味着<html>元素块中的每个元素都是按照正常流程遵循块和内联布局规则进行布局的。参与 BFC 的元素使用 CSS 框模型概述的规则，该模型定义了元素的边距、边框和填充如何与同一上下文中的其他块交互。
1.1 创建新的块格式上下文
<html> 元素不是唯一能够创建块格式上下文的元素。任何块级元素都可以通过应用某些 CSS 属性来创建一个 BFC。
除了文档的根元素 (<html>) 之外，还将在以下情况下创建一个新的 BFC：
-
使用 float 使其浮动的元素
-
绝对定位的元素 (包含 position: fixed 或 position: sticky
-
使用以下属性的元素 display: inline-block
-
表格单元格或使用 display: table-cell, 包括使用 display: table-* 属性的所有表格单元格
-
表格标题或使用 display: table-caption 的元素
-
块级元素的 overflow 属性不为 visible
-
元素属性为 display: flow-root 或 display: flow-root list-item
-
元素属性为 contain: layout, content, 或 strict
-
flex items
-
网格布局元素
-
multicol containers
-
元素属性 column-span 设置为 all
这很有用，因为新的 BFC 的行为与最外层的文档非常相似，它在主布局中创造了一个小布局。BFC 包含其内部的所有内容，float 和 clear 仅适用于同一格式上下文中的项目，而页边距仅在同一格式上下文中的元素之间折叠。
1.2 创建 BFC 实例
在下面的示例中，我们在应用了边框的 <div> 中有一个浮动元素。该 div 的内容与浮动元素一起浮动。由于 float 的内容比它旁边的内容高，所以现在 DIV 的边框贯穿了 float。
<div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
.box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
}
.float {
float: left;
width: 200px;
height: 150px;
background-color: white;
border: 1px solid black;
padding: 10px;
}
创建一个新的 BFC 将包含该浮动。在过去，一种典型的方法是设置 overflow: auto 或设置其他不是 overflow: visible 的值。
.box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
overflow: auto;
}
.float {
float: left;
width: 200px;
height: 150px;
background-color: white;
border: 1px solid black;
padding: 10px;
}
设置 overflow: auto 会自动创建包含浮动的新 BFC。现在，我们的 DIV 在布局中变成了一个迷你布局。任何子元素都将包含在其中。
使用 overflow 创建新的 BFC 的问题在于， overflow 属性用于告诉浏览器您希望如何处理溢出的内容。在某些情况下，当您纯粹使用此属性创建 BFC 时，您会发现不需要的滚动条或剪切阴影。另外，对于未来的开发人员来说，它可能不太可读，因为不能显式地表明为什么要使用溢出来实现这一目的。如果您使用了这个方法，最好对代码进行注释以便他人理解。
1.3 使用 display:flow-root 显式创建 BFC
使用 display: flow-root （或 display: flow-root list-item）将创建一个新的 BFC，而不会产生任何其他潜在的问题副作用。
.box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
display: flow-root;
}
.float {
float: left;
width: 200px;
height: 150px;
background-color: white;
border: 1px solid black;
padding: 10px;
}
使用 <div> 上的 display: flow-root ，该容器内的所有内容都参与该容器的块格式上下文，并且浮动不会从元素底部弹出。
flow-root 关键字的意义是，创建的内容本质上类似于一个新的根元素（如 <html> 所做），并确定这个新的上下文如何创建及其流布局如何实现。
2、行内格式化上下文
内联格式上下文存在于其他格式上下文中，可以将其视为段落的上下文。段落创建了一个内联格式上下文，其中在文本中使用诸如 <strong>、<a> 或 <span> 元素等内容。
box model 不完全适用于参与内联格式上下文。在水平书写模式行中，水平填充、边框和边距将应用于元素，并左右移动文本。但是，元素上方和下方边距将不适用。应用垂直填充和边框可能会在内容的上方和下方重叠，因为在内联格式上下文中，填充和边框不会将行框撑开。
<p>
Before that night—<strong>a memorable night</strong>, as it was to
prove—hundreds of millions of people had watched the rising smoke-wreaths of
their fires without drawing any special inspiration from the fact.”
</p>
strong {
margin: 20px;
padding: 20px;
border: 5px solid rebeccapurple;
}
扫一扫
637
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
