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 时产生

链接：

bookmark

关联阅读：

link_to_page

浮动

• 浮动最早只是为了实现文字环绕图片的效果

• 设置 float 后，元素将脱离标准流，从而导致高度塌陷，高度塌陷后原本想放在下面的元素会自动向上补充

• 容器依据浮动方式进行补充后，容器内的文字仍会产生环绕效果。下图中的 div2，div3 设置了左浮动，但 div4 中的文字仍然产生了环绕效果

  

bookmark

清除浮动的两种方式

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

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

代码示例：

<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>

.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的回答 - 知乎

bookmark

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

.cf:before,
.cf:after {
		/* 让 css 伪元素能够显示 */
    content: " ";
		/* table 能够自动生成带 bfc 的元素防止边距合并与穿透 */
    display: table;
}

.cf:after {
    clear: both;
}

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

bookmark