html开发中CSS块格式化上下文实现方法

块格式化上下文

CSS 块级框参与的格式化上下文，称作块格式化上下文（Block Formatting Contexts，简称BFC），它规定了内部的块级框如何排列。

块格式化上下文看似抽象，其实比较简单，它实际上就是页面上的一个块级元素，只是在布局上，该元素内部的元素和外部的元素相互独立，互不影响。

通俗的讲，就是在创建了块格式化上下文的元素中，其子元素都会按照块格式化上下文的规则排列自己。以下元素都会自动为其内容创建一个块格式化上下文：

根元素
浮动的元素（float: left | right）
固定定位的元素（position: absolute | fixed）
overflow 属性值为 hidden | auto | scroll 的元素
display 属性值为 table | table-caption | table-cell | flex的元素
表格的单元格（td、th）
表格的标题（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" src="/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 块格式化上下文中包含块级元素和行内元素