BFC
全称 Block Formatting Context,翻译过来就是块格式化上下文,它是 CSS 规范的一部分。
可以用一些 CSS 属性为一个元素创建出 BFC。决定元素的内容如何渲染以及与其他元素的关系和交互。BFC 有一个重要的特点:具有隔离作用。
通过下列方式可以创建块格式化上下文:
<html>
;float
,但值不能是 none
);position
为 absolute
或者 fixed
);overflow
值不为 visible
的块元素;display
值为 flow-root
的元素;display
为 inline-block
);display
为 flow-root
,它可以创建无副作用的 BFC;display
为 flex
或 inline-flex
元素的直接子元素);display
为 grid
或 inline-grid
元素的直接子元素`);column-count
或 column-width
不为 auto
);display
为 table-cell
,HTML 表格单元格默认为该值);display
为 table-caption
,HTML 表格标题默认为该值);display
为 table
、table-row
、inline-table
等);两个典型的例子:
比如下面的代码:
<style>
#main{
background-color: gold;
}
.child1{
height: 200px;
width: 100px;
float: left;
background-color: green;
}
</style>
<div id="main">
<div class="child1"></div>
</div>
child1
使用了 float
,浮动脱离了文档流,child1
创建了 BFC。而 #main
元素没有设置确切的高度,也没有创建 BFC,就造成了高度的塌缩。
父元素没有展示出来
要解决这个问题可以给 #main
元素也创建 BFC,创建方式有很多种,比如 display: flow-root
或者 overflow: hidden
。
#main{
background-color: gold;
overflow: hidden;
}
等高
例如:
<style>
#main{
height: 200px;
width: 200px;
margin-top: 100px;
background-color: gold;
}
.child1{
margin-top: 50px;
height: 100px;
width: 100px;
background-color: green;
}
</style>
<div id="main">
<div class="child1"></div>
</div>
结果就发现,只有父元素的 margin 生效了,解决这个问题是给 #main
元素创建 BFC,让子元素与外部元素隔离。
#main{
height: 200px;
width: 200px;
margin-top: 100px;
background-color: gold;
overflow: hidden;
}
结论:处于同一个 BFC 中的元素相互影响,可能会发生 margin 塌陷。 一开始 #main
元素和他的子元素 child1
都不具备 BFC,都处于根元素的 BFC 中,也就产生了影响。#main
元素创建 BFC 后,内部的子元素就与外部做了隔离。
利用浮动可以创建出基本的页面布局,也可以实现文字环绕效果,例如:
<style>
#main{
border: 1px solid red;
overflow: hidden;
}
p{
margin: 0;
}
.child1{
width: 100px;
height: 100px;
background-color: rgba(20, 100, 0, .6);
float: left;
}
</style>
<div id="main">
<div class="child1"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam fugiat, incidunt culpa voluptates commodi soluta, cupiditate sequi corporis atque nihil provident magni quos veritatis, dolorem velit temporibus autem pariatur earum?</p>
</div>
效果:
文字环绕
但有时候浮动会影响到周围元素,尤其是把周围元素遮盖住,这是我们不希望看到的。
CSS 提供了 clear
属性可以给一个元素清除浮动。例如下面的代码:
<style>
#main{
border: 1px solid red;
overflow: hidden;
}
.child1{
width: 100px;
height: 30px;
background-color: gold;
float: left;
}
.child2{
width: 100px;
height: 30px;
background-color: green;
}
.middle{
width: 200px;
height: 30px;
background-color: purple;
}
</style>
<div id="main">
<div class="child1"></div>
<div class="middle"></div>
<div class="child2"></div>
</div>
当 child1
左浮动后,middle
就会被遮挡。
遮挡
要想完整显示 middle
的内容可以使用 clear: left
,表示清除左边的浮动,这样它会移动到浮动元素的下方。
.middle{
clear: left;
}
clear-left
clear
属性不仅可以应用于非浮动块,也可以应用于浮动块。例如下面的代码,假如 child1
和 child2
都是浮动元素,并且 child1 是左浮动,child2 是右浮动。如果给 child2 加入 clear: left
,那么 child2 的上边框会与 child1 的下边框对齐。
<div class="wrapper">
<div class="child1"></div>
<div class="child2"></div>
</div>
浮动
清除左浮动
假设 wrapper
元素没有固定的高度,那么高度就会塌缩。
高度塌缩
如果想要 wrapper
自适应即包含所有浮动元素,那就需要清除浮动或者给 wrapper
元素创建 BFC。清除浮动可以这么做:
.wrapper::after {
content: "";
display: block;
clear: both;
}
BFC 即:格式化上下文,它既不是一个 CSS 属性,也不是一段代码,而是 CSS2.1 规范中的一个概念,决定元素的内容如何渲染以及与其他元素的关系和交互。BFC 有五条规则:
类型 | 例子 | 权重 |
---|---|---|
ID 选择器 | #root | 100 |
class 选择器 | .wrapper | 10 |
属性选择器 | [type='text'] | 10 |
标签和伪类 | div | 1 |
伪元素 | ::first-letter | 1 |
行内样式 | <p style="height:20px"> | 1000 |
通配符 | * | 0 |
关系选择符(+
、>
、``、||
、~
)与通配符一样,都是没有权重的。
如果一个样式属性后面加上 !important
规则,此声明将覆盖任何其他声明。也可以认为它的优先级是最高的。
例如下面的代码:
<style>
*{
color: red;
}
p{
color: green;
}
</style>
<p>OK!!!
<span>span span</span>
</p>
问 span
元素的字体颜色是什么颜色?
答案是 red
,这说明通配符的权重要比继承权重大。如果去掉通配符,那么 span
的字体颜色将继承 p
元素的字体颜色。
A. .bfc+div B. .bfc div C. .bfc > div D. .bfc~div
答案是 A
第二个选项表示后代选择器,儿子元素、孙子元素都可以选择到; 第三个选项表示子代选择器,只有 .bfc 的子元素可以选择到; 第四个选项表示通用的兄弟选择器,不管相不相邻都可以选择到;
A. [attr^="val"] B. [attr~="val"] C. [attr|="val"] D. [attr$="val"]
答案 C
属性选择器通过已经存在的属性名或属性值匹配元素。例如:
input[type="text"]{
color: red;
}
[attr^="val"]
表示属性值以 val
开头,题目是说以 val-
开头,所以不正确;[attr~="val"]
表示属性值用空格分割为多个值,其中至少有一个值是 val
,例如 class
属性就可以有多个值;[attr|="val"]
表示带有以 attr
命名的属性的元素,属性值为 val
或以 val-
为前缀。选取有自定义属性的元素时可以使用该选择器(data-*
)。[attr$="val"]
表示属性值以字符串 val
结尾;[attr*="val"]
表示选取 attr 属性值中包含 val
字符串的元素。除此之外,还有一种格式:
[attr operator value i]
它表示在属性选择器的右方括号前添加一个用空格隔开的字母 i(或 I,大小写不敏感),可以在匹配属性值时忽略大小写。如:
/* 包含 "insensitive" 的链接,不区分大小写 */
a[href*="insensitive" i] {
color: cyan;
}
/* 包含 "cAsE" 的链接,区分大小写 */
a[href*="cAsE" s] {
color: pink;
}
参考资料:
视觉化模型:
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Visual_formatting_model