bfc (收集的）

一些基本概念

viewport: 展现网页的媒体，比如窗口或者某个区域，它的大小是有限制的，为了不被平台术语所束缚，我们给他起名viewport，中文意思就是视口。
canvas: 而我们在渲染网页的时候通常并不知道我们需要多大的空间，而且这些空间通常尺寸会超过viewport的大小，于是实际上我们需要设想一个无限大的画布来绘制我们的元素，我们把它称为canvas。
box: element（元素）和node(节点)是大家很熟悉的概念，当我们做布局计算的时候，通常会把节点变成box，一个节点可能产生多个box，伪元素也会产生box。
render tree: 对应于dom树，我们把box的包含关系构成的属性结构成为渲染树render tree

BFC

首先我们来考虑一个基本的情况：

run

<html>

  <head><title>囧</title></head>

  <body>

    <div style="width:300px;height:50px;"></div>

    <div style="width:300px;height:20px;"></div>

    <div style="height:50px;"></div>

    <div style="width:300px;height:50px;"></div>

  </body>

</html>

之所以简单是因为这些div每一个只产生一个盒子，默认的display下，div产生块级盒，为了让块级盒按照我们的意愿排布，我们需要引入一个概念：block formatting context，简称BFC。

BFC其实是个相当简单的概念，然而因为实在中文中没啥合适的词来形容（你不觉得"块级格式化上下文"比BFC更让人觉得不知所云么？），这个概念已经被传得极其神秘：

在 CSS 面试中问 BFC 等概念，就如在 JS 面试中问闭包等概念一样，经常会刷掉一些真正优秀的人。 ——玉伯

甚至很多人连它是动词还是名词都搞不清，不信你可以搜索一下触发BFC，亲，BFC是名词啊……怎么它就能触发呢？

简单地说，BFC就是像例子里面一样顺次竖着排块级盒的一种上下文。竖着排盒子而已，竖着排盒子有什么理解不了的啊我X？

好吧平复一下情绪，我们继续说，canvas会设立一个BFC，这也是最外层的formatting context了，问题的复杂性在于有些块级盒内部也可以产生BFC（至少它必须也能包含块级盒），于是说BFC是可以嵌套滴：

run

<html>

  <head><title>囧</title></head>

  <body>

    <div style="width:300px;height:100px;">

      <div style="width:300px;height:20px;"></div>

      <div style="height:50px;"></div>

    </div>

    <div style="height:50px;"></div>

  </body>

</html>

不是所有块级盒内部都可以产生BFC，比如说要是这盒里面连块级盒都没有，都是行内盒那就产生IFC：

run

<html>

  <head><title>囧</title></head>

  <body>

    <div style="width:300px;height:100px;overflow:visible;">

      <span>囧</span><span>囧囧</span>

    </div>

    <div style="height:50px;"></div>

  </body>

</html>

不过，只要它的子节点里面有一个块级盒，它就产生BFC，那些行内元素，会自动套一个匿名的块级行盒。

run

<html>

  <head><title>囧</title></head>

  <body>

    <div style="width:300px;height:100px;overflow:visible;">

      <span>囧</span><div>啦啦啦</div><span>囧囧</span>

    </div>

    <div style="height:50px;"></div>

  </body>

</html>

又比如说overflow:visible的块盒就不产生BFC，不但不产生BFC，啥FC都不产生，它的子元素直接搞进自己外层的BFC鸟：

run

<html>

  <head><title>囧</title></head>

  <body>

    <div style="width:300px;overflow:visible;">

      <p style="width:200px;height:20px;"></p>

      <p style="height:50px;">aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa</p>

    </div>

    <p style="height:50px;"></p>

  </body>

</html>

overflow:visible这个限制只对所谓的块盒（既包含块级盒、自己又是块级盒）存在，有些盒内部也能包含块级元素，但是它本身又不是块级元素（比如display为table-cell、inline-block、或者盒本身是flex item等），因为外面不是BFC，所以它们不论如何一定会给包含的块级盒创建一个新的BFC出来。

同一个BFC里面的盒还会有margin collapse现象，详情见此文《谈margin collapsing(外边距叠加)》

IFC

IFC里面可能有文字、行内元素混合排布：

run

<html>

  <head><title>囧</title></head>

  <body>

    <div style="">

      <span>囧</span>囧囧囧<span>囧囧</span>

    </div>

  </body>

</html>

文本的排布是个很复杂的事情，在dom树中，我们存储的是字符和字符串，而在render tree中，我们要使用一个新的概念：字型（glyph）。字体文件（通常是ttf，ture type格式的）中包含着不同字体下字符到字型的规则。

一个字型有很多属性，下面这张图来自freetype，它是大部分浏览器使用的文字排版基础库：

详情请看这里。

图中的那根加粗的X轴就是传说中的基线(base line)了，文字默认是按照基线对齐的。

下面这个demo展示了一个IFC中的几条重要的基准线：

baseline

sub

super

top

text-top

middle

bottom

text-bottom

great it works!²囧啊

在水平方向，文字的排布主要受到以下属性影响

word-break, word-spacing, word-wrap
letter-spacing
white-space
text-align
hyphenate-character, hyphenate-limit-after, hyphenate-limit-before, hyphenate-limit-lines, hyphens
justify-content
……

总之很复杂，讲也讲不完，而且大家又不要写浏览器所以大家就大概望文生义一下好了（po主被扔蛋中……）。

对于一个正常的"行盒"来说，文字总是垂直居中排布的。

在纵向，文本排布主要受line-height属性影响，在有行内盒参与的情况下就复杂了，

一个行内盒的vertical-align可以有这样几种取值：

baseline
sub
super
top
text-top
middle
bottom
text-bottom

它也可以是某一指定高度。根据行内盒的对齐方式，它有可能把这行盒向上或者向下"撑大",造成超过行高的情况。

所以行盒在BFC中占据的实际高度，很可能大于line-height。

文字的baseline很好理解，而行内元素则比较复杂，特别是当行内元素自身又是容器的时候：

run

<html>

  <head><title>囧</title></head>

  <body>

    <div style="overflow:visible;">

      <span>囧</span>囧囧囧<div style="display:inline-block;width:300px;height:300px;"></div><span>囧囧</span>

    </div>

  </body>

</html>

run



<html>

  <head><title>囧</title></head>

  <body>

    <div style="overflow:visible;">

      <span>囧</span>囧囧囧<div style="display:inline-block;width:300px;height:300px;">123<br/>123<br/>123</div><span>囧囧</span>

    </div>

  </body>

</html>

浮动

浮动是个行级的行为，当遇到浮动元素的时候，会首先"假装"它是个行内元素进行排版，排好后就往浮动的方向挤到挤不过去为止（遇到边界或者其它浮动元素）。

run

<html>

  <head><title>囧</title></head>

  <body>

    <div style="">

      <span>囧</span>囧囧囧<div style="display:inline-block;width:300px;height:300px;float:left"></div><span>囧囧</span>

    </div>

  </body>

</html>

run

<html>

  <head><title>囧</title></head>

  <body>

    <div style="">

      <span>囧</span>囧囧囧<div style="display:inline-block;width:300px;height:300px;float:left"></div><span>囧囧</span><br/>
<div style="display:inline-block;width:300px;height:300px;float:left"></div>

    </div>

  </body>

</html>

某一方向有clear的时候，浮动元素总是挤到边界，在垂直方向上的行为类似"换行"。

run

<html>

  <head><title>囧</title></head>

  <body>

    <div style="">

      <span>囧</span>囧囧囧<div style="display:inline-block;width:300px;height:300px;float:left"></div><span>囧囧</span><br/><div style="clear:left;display:inline-block;width:300px;height:300px;float:left"></div>

    </div>

  </body>

</html>

排好一个浮动元素之后，这一行就要重排一次。所以说浮动元素会造成行级的reflow。重排的时候，行盒会躲开浮动元素。之后的块级盒（不论是行盒还是其它盒）也都会躲开浮动元素排布。

bfc (收集的）的更多相关文章

前端精选文摘：BFC 神奇背后的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...
【转】前端精选文摘：BFC 神奇背后的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...
【理论面试篇】收集整理来自网络上的一些常见的经典前端、H5面试题 Web前端开发面试题
##2017.10.30收集面试技巧 5.1 面试形式 1) 一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2) 面试官喜欢什么样的人 ü 技术好. ...
【编码题篇】收集整理来自网络上的一些常见的经典前端、H5面试题 Web前端开发面试题
编写一个方法求一个字符串的字节长度假设:一个英文字符占用一个字节,一个中文字符占用两个字节 function GetBytes(str){ var len = str.length; var byt ...
跟着9张思维导图学习Javascript js 关键字和保留字 css3中的BFC,IFC,GFC和FFC
跟着9张思维导图学习Javascript 学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 javascript 相关的思维导图(非原创). 思维导图小ti ...
十分钟复习CSS盒模型与BFC
css盒模型与BFC 本文为收集整理总结网上资源旨在系统复习css盒模型与bfc 节省复习时间阅读10分钟什么是盒模型每一个文档中,每个元素都被表示为一个矩形的盒子,它都会具有内容区.padd ...
深入理解BFC
定义在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是格式化上 ...
“fixed+relative==absolute”——对BFC的再次思考
好久没写博客了,刚好今天跨年夜没约到什么妹子,在家宅着不如写点东西好了. 需求昨天晚上,给公司年会做一个移动端的投票页面,遇到一个UI优化的问题: · 正文内容少于一屏时,投票提交按钮固定显示在页面 ...
关于CSS inline-block、BFC以及外边距合并的几个小问题
CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...

随机推荐

参数化--每个vuser使用不同的参数值
使用controller并发时,每个vuser从参数文件中取一个值,设置如下图:
【问题记录】eclipse启动web项目时，spring会初始化两次
背景:一个tomcat,一个eclipse,一个SSM框架的web项目.在eclipse中新建tomcat服务器,默认配置,然后在服务器配置中将Server Locations改成Use Tomcat ...
iOS 学习笔记七【博爱手把手教你使用2016年gitHub Mac客户端】
iOS 学习笔记七 [博爱手把手教你使用gitHub客户端] 第一步:首先下载git客户端链接:https://desktop.github.com 第二步:fork 大神的代码[这里以我的代码为例 ...
Unity3d中使用自带动画系统制作下雨效果(一)
之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪. 步 ...
Tree UVA - 548 已知中序遍历和后序遍历，求这颗二叉树。
You are to determine the value of the leaf node in a given binary tree that is the terminal node of ...
15：开发Rsync服务启动脚本案例
[root@m01 ~]# rsn_count="ps -ef|grep 'rsync --d[a]emon'|wc -l" [root@m01 ~]# echo ${rsn_co ...
Vuex 2 入门与提高。
从计数器开始让我们从一个简单的计数器,开始进入Vuex 的世界: 计数器应用的数据模型很简单:使用一个counter属性来表示计数器的当前值就够了. 在Vue实例的created钩子中,应用启动 ...
【实用】如何在windows下快速截图？
如何在windows下快速截图? 快速截图是很多人的需求.截图的工具和方案也很多,但是,这里给出一个通用的,被大众认为最高效的一个解决方案. 我们都知道键盘上有一个"prt sc" ...
codeforces(559C)--C. Gerald and Giant Chess(组合数学)
C. Gerald and Giant Chess time limit per test 2 seconds memory limit per test 256 megabytes input st ...
循环杀死Mysql sleep进程脚本
#!/bin/sh while : do n=`mysqladmin processlist -uadmin -p***|grep -i sleep |wc -l` date=`date +%Y%m% ...

bfc (收集的）

一些基本概念

BFC

IFC

浮动

bfc (收集的）的更多相关文章

随机推荐

热门专题