前端基础知识巩固 - FC,BFC,浮动,清除浮动

FC & BFC

FC是 formatting contexts 的首字母缩写,直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用

FC 有以下几种:

  • BFC:Block formatting contexts = 块级格式化上下文
    • 主要作用是实现页面上的一个隔离的渲染区域,容器里面的子元素不会在布局上影响到外面的元素
    • 如何产生 BFC?
      • float: left | right (float 的值不为 none)
      • overflow: hidden | auto | scroll (overflow 的值不为 visible)
      • display: table-cell | table-caption | inline-block (display 的值为 table-cell, table-caption, inline-block 中的任何一个)
      • position: absolute | fixed (position 的值不为 relative 和 static)
    • BFC 有三个特性:
      • BFC 会阻止垂直外边距(margin-top、margin-bottom)折叠
      • BFC 不会重叠浮动元素
      • BFC 可以包含浮动。 此特性可以达到 “清除浮动” 的目的
  • IFC:Inline Formatting Contexts = 内联格式化上下文
    • 高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的 padding/margin 影响)
  • FFC:Flex Formatting Contexts = 自适应格式化上下文。CSS3 支持
    • display 为 flex 或者 inline-flex 时产生
    • flex 和 inline-flex 的区别:
      • flex:使容器类似块级元素 (block)
      • inline-flex:使容器类似内联元素 (inline)
  • GFC:GridLayout Formatting Contexts = 网格布局格式化上下文。CSS3 支持
    • display 为 grid 时产生

浮动

  • 浮动最早只是为了实现文字环绕图片的效果
  • 设置 float 后,元素将脱离标准流,从而导致高度塌陷,高度塌陷后原本想放在下面的元素会自动向上补充
  • 容器依据浮动方式进行补充后,容器内的文字仍会产生环绕效果。下图中的 div2,div3 设置了左浮动,但 div4 中的文字仍然产生了环绕效果

清除浮动的两种方式

1. 利用 clear 属性,清除浮动

可以在需要清除浮动的元素后面添加一个具有 clear: both | left | right 样式的空标签,亦或是在有浮动元素的父级元素上使用 after 伪类添加 clear 样式。

代码示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="div1" style="background-color:salmon;height:100px;width:350px">
div1
</div>

<div class="floated">
<div class="div2" style="background-color:darkgrey;height:120px;width:200px">
div2
</div>
<div class="div3" style="background-color:skyblue;height:140px;width:50px">
div3
</div>
<div class="div4" style="background-color:aqua;height:100px;width:600px">
div4
</div>

<div class="blank"></div>
</div>

<p>孔乙己便涨红了脸,额上的青筋条条绽出,争辩道,“窃书不能算偷……窃书!……读书人的事,能算偷么?”接连便是难懂的话,什么“君子固穷”,什么“者乎”之类,引得众人都哄笑起来:店内外充满了快活的空气。</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.div2 {
float: left;
margin-left: 30px;
}
.div3 {
float: left;
}

/* 空标签方案 */
.blank {
clear: both;
}
/* 伪类方案 */
.floated::after {
clear: both;
content: " ";
display: block;
}

可以看到最下方的文字已经不再浮动:

2. 使父容器形成 BFC

触发 BFC 的方式见第一节关于 BFC 的讲解。使用 BFC 方式清除浮动也会有一些问题:

  • float: left | right:将父元素设置成浮动,从而清除子元素的浮动。副作用是父元素也变成浮动元素了,我们不可能让整个布局都建立在浮动的基础上
  • overflow: hidden | auto | scroll:在某些情况下会产生滚动条或截断内容的现象
  • display: table-cell | table-caption | inline-block:无法兼容低版本 IE
  • position: absolute | fixed:改变了元素的定位方法,如果定位方式不是我们需要的,则会很麻烦

参考: 前端的清除浮动? - Shelley Lee的回答 - 知乎

尼古拉斯大师的清除浮动方案

应该是目前最简洁有力的清除浮动方案了。原文: A new micro clearfix hack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.cf:before,
.cf:after {
/* 让 css 伪元素能够显示 */
content: " ";
/* table 能够自动生成带 bfc 的元素防止边距合并与穿透 */
display: table;
}

.cf:after {
clear: both;
}

/* 为旧IE准备的,触发 haslayout */
.cf {
*zoom: 1;
}

关联阅读