块格式化上下文
CSS 块级框参与的格式化上下文, 称作块格式化上下文(Block Formatting Contexts, 简称 BFC), 它规定了内部的块级框如何排列
块格式化上下文看似抽象, 其实比较简单, 它实际上就是页面上的一个块级元素, 只是在布局上, 该元素内部的元素和外部的元素相互独立, 互不影响
通俗的讲, 就是在创建了块格式化上下文的元素中, 其子元素都会按照块格式化上下文的规则排列自己以下元素都会自动为其内容创建一个块格式化上下文:
根元素
浮动的元素(float: left | right)
固定定位的元素(position: absolute | fixed)
overflow 属性值为 hidden | auto | scroll 的元素
display 属性值为 table | table-caption | table-cell | flex 的元素
表格的单元格(tdth)
表格的标题(display: table-captions,caption)
块格式化上下文具有以下特点:
1)在块格式化上下文中, 如果只存在块级框, 则所有块级框从包含块的顶部开始, 一个接一个地垂直排列, 每个框被渲染为完整的一行
假设在 body 下, 有一个 class = "wrapper" 的 p 子元素, 该子元素又包含三个 p 子元素
上述代码中, html 元素是根元素, body 元素是根元素唯一的子元素,.wrapper 又是 body 的子元素
为了便于观察, 为根元素 html 设置了外边距内边距和红色边框, 为 body 元素设置了内边距和黑色边框, 为 .wrapper 子元素设置宽度内边距和蓝色边框, 还为其子元素设置上下外边距和灰色边框:
- html {
- ?? margin: 10px;
- ?? padding: 10px;
- ?? border: 1px solid red;
- }
- body {
- ?? padding: 20px;
- ?? border: 1px solid black;
- }
- .wrapper {
- ?? width: 300px;
- ?? padding: 10px;
- ?? border: 1px solid blue;
- }
- .wrapper p {
- ?? margin: 10px 0;
- ?? border: 1px dashed gray;
}
图 5-8 块格式化上下文中元素垂直排列 DB2tSqy9i1xLS51rHN4rHfvuC6z7Ki" lazyload="/uploadfile/Collfiles/20180222/20180222091350132.png" title=" 相邻元素的垂直外边距合并 " /> 图 5-9 相邻元素的垂直外边距合并
图 5-10 父元素和子元素的外边距合并
图 5-11 元素自身的垂直外边距合并
图 5-12 外边距合并使距离一致
???
???
为了方便查看容器中内容的对齐情况, 为容器设置宽度内边距和边框, 并让 p 向左浮动, 为两个子元素设置不同的背景颜色:
- .wrapper {
- ?? width: 300px;
- ?? padding: 10px;
- ?? border: 1px solid #ccc;
- }
- .wrapper p {
- ?? float: left;
- ?? width: 60px;
- ?? height: 60px;
- ?? background: #f90;
- }
- p {
- ?? color: #fff;
- ?? background: #2595e5;
}
图 5-13 内部的框左对齐
- p {
- ?? color: #fff;
- ?? overflow: hidden;
- ?? background: #2595e5;
}
图 5-14 消除浮动元素的影响
- ??? some text
- ???
- ??? span1
- ??? span2
为了方便查看每一行的效果, 为 p 和 span 设置边框, 为 p 设置上下外边距:
- .wrapper p,
- .wrapper span {
- ??? border: 1px dashed #ccc;
- }
- .wrapper p {
- ??? margin: 10px 0
}
图 5-15 块格式化上下文中包含块级元素和行内元素
来源: https://www.2cto.com/kf/201802/722464.html