CSS 排版与正常流 —— 重学CSS

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"同学们好，我是来自 《","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"技术银河","attrs":{}},{"type":"text","text":"》的 💎 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"三钻","attrs":{}},{"type":"text","text":" 。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这一周我们重新回到《重学 CSS》系列，之前的文章中我们重新学习了《 ","attrs":{}},{"type":"link","attrs":{"href":"https://xie.infoq.cn/article/c2f2e662bd7d53fa742a92c65","title":""},"content":[{"type":"text","text":"CSS 选择器","attrs":{}}]},{"type":"text","text":"》和《 ","attrs":{}},{"type":"link","attrs":{"href":"https://xie.infoq.cn/article/01488eeda5beb5f2dc9e2ff1a","title":""},"content":[{"type":"text","text":"CSS 语法与规则","attrs":{}}]},{"type":"text","text":"》。接下来我们就一起来讲讲 CSS 里面的排版与正常流","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在讲解 CSS 当中的排版和正常流的时候，我们会按照属性的一些逻辑关系来分成几个部分来讲解与学习。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b3/b34c995f506fd74ab4d6e4adb20b4706.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"盒 ( Box )","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"讲到排版，我们需要引入的第一个概念就是 \"","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"盒","attrs":{}}],"attrs":{}},{"type":"text","text":"\"。之前我们在《模拟浏览器》和之前的一些 CSS 的文章中都讲到了排版相关的概念。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"而我们真正去讲到排版的时候，我们需要用到的单位一定就是 \"","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"盒","attrs":{}}],"attrs":{}},{"type":"text","text":"\"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在真正进入详细了解 \"盒\" 的概念之前，我们先来做认识一下 3 个比较容易混交的概念。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":"1","normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"标签 ( Tag ) —— ","attrs":{}},{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"源代码","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"元素 (Element) —— ","attrs":{}},{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"语义","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"盒 ( Box ) —— ","attrs":{}},{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"表现","attrs":{}}]}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"HTML 代码中可以书写开始","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"标签","attrs":{}}],"attrs":{}},{"type":"text","text":"，结束","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"标签","attrs":{}}],"attrs":{}},{"type":"text","text":"，和自封闭","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"标签","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"标签是一个源代码的概念，所以方式我们提到在 HTML 代码中写的肯定都是标签。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一对起止","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"标签","attrs":{}}],"attrs":{}},{"type":"text","text":"，表示一个","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"元素","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"元素是存在我们脑子里的一个概念，它是语义领域的一个概念，所以一对起止标签它一定是表示一个我们脑子里面的概念。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"DOM 树中存储的是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"元素","attrs":{}}],"attrs":{}},{"type":"text","text":"和其他类型的节点 ( Node )。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"DOM 树中存储的不全是元素，因为DOM 树中存储的东西叫节点 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Node","attrs":{}}],"attrs":{}},{"type":"text","text":"，所以元素只是是节点的一种。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"比如说我们的文本节点也是节点，但他并不是元素。再比如我们的注释节点，它也是节点但是它也不是元素。当然还有 CDATA 节点，还有 processing-instruction，DTD等这些都是会存入 DOM 树的，当时它们都并不是元素。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"很多同学的理解，DOM 树中存储的都是元素，不过这样也没有错。因为其他的节点相对来说都没有那么重要。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS 选择器中的是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"元素","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其实这里还可以加一个 \"或\"，在《CSS 选择器》中讲到的，CSS 选择器选中的是元素或者是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"伪元素","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS 选择器中的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"元素","attrs":{}}],"attrs":{}},{"type":"text","text":"，在排版时可能产生多个","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"盒","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这个地方是大家需要注意到的一个概念，","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"CSS 选择器选中的元素，它不一定和盒是一一对应的关系","attrs":{}},{"type":"text","text":"。它有可能是一对多的关系的。但是","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"有盒一般来说必定是有对应的元素的","attrs":{}},{"type":"text","text":"。我们不可能无中生有产生一个元素，即使是号称是无中生有的伪元素也是依附于一个选中的元素产生的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"排版和渲染的基本单位是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"盒","attrs":{}}],"attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 在我们的《模拟浏览器》的实现过程中，我们的排版盒渲染都是直接拿元素当盒去用了。但是这是一个很粗糙的做法，在实际上我们很多元素都会产生多个盒。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"比如说 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"inline","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素就会因为分行而产生多个盒。又比如说带有伪元素，被伪元素选择器选中的元素也会生成多个盒。所以","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"我们排版盒渲染的基本单位都是盒","attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b3/b34c995f506fd74ab4d6e4adb20b4706.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"盒模型","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"既然我们讲到盒，我们都会讲到大名鼎鼎的 \"","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"盒模型","attrs":{}}],"attrs":{}},{"type":"text","text":"\"。我相信很多同学都知道盒模型，并且也学习过盒模型。但是也有很多同学可能没有理清楚摸透这个概念，所以就会导致不知道什么是盒模型，更不知道\"","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"盒","attrs":{}}],"attrs":{}},{"type":"text","text":"\"这个概念是从何而来。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面我们已经讲清楚了盒是从，标签到元素，到 CSS 选择器到如何产生了盒。所以对盒的来龙去脉我们都很清楚了，所以这里我们就可以开始详细的去了解盒模型的概念。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"盒模型是我们排版的时候所用的一种基本单位","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"盒模型中的\"盒\"，不光是有一个宽和一个高。不像在《模拟浏览器》部分里面那样非常的好算，其实它还是挺复杂的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"盒模型是一个多层的结构，从里面到外面分为：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":"1","normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"最里面就是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":"，也就是我们的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"内容","attrs":{}}],"attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"content 到 border 之间有一个圈空白，这个圈叫做 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding","attrs":{}}],"attrs":{}},{"type":"text","text":"，也就是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"内边距","attrs":{}}],"attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"Border 的外面又有一个圈空白叫 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin","attrs":{}}],"attrs":{}},{"type":"text","text":"，也就是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"外边距","attrs":{}}],"attrs":{}}]}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/fe/fe5c9c804195e0f30cd981d8bafc47e0.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"padding 主要影响的是盒内的空间 —— 主要决定盒内的空间排布，也就是 content 区域的大小","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"margin 主要影响的是盒外的空间 —— 决定了盒周围空白区域的大小","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"盒模型里面的 宽 (width) 是有讲究的，盒子的宽度是有可能被 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box-sizing","attrs":{}}],"attrs":{}},{"type":"text","text":" 属性所影响的。最常见的两个值就是：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"content-box","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"设置的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"width","attrs":{}}],"attrs":{}},{"type":"text","text":" 属性只包含 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":" 的内容的空间。也就是说：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"盒子占用的空间","attrs":{}}],"attrs":{}},{"type":"text","text":" = ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"content 的大小","attrs":{}}],"attrs":{}},{"type":"text","text":" + ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding 的大小","attrs":{}}],"attrs":{}},{"type":"text","text":" + ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border 的大小","attrs":{}}],"attrs":{}},{"type":"text","text":" + ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin 的大小","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/a6/a6b050f46c6b36fd26c6181d1b746e33.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"怎么听起来就是一脸懵的感觉。😂","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其实更接近人类的理解就是，我们在 CSS 中设置的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"width","attrs":{}}],"attrs":{}},{"type":"text","text":"属性只对最里面的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":"的空间有效。其余的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border","attrs":{}}],"attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin","attrs":{}}],"attrs":{}},{"type":"text","text":" 都会叠加到盒子的占用空间。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那这个为什么程序员都说这种盒子是 \"反人类\" 的呢？如果很早起就接触到 HTML 和 CSS 的同学应该都知道这么一个让人痛不欲生的场景：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在排版时候我们明明设置好这个盒子的宽度，但是最后加了 border 和 padding 就让盒子 \"变大\" 了。所以最后我们要反过来重新计算 width 属性来保证这个盒子是我们想要的宽度。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"对！可能很多用习惯 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box-sizing: border-box","attrs":{}}],"attrs":{}},{"type":"text","text":" 的同学，早就忘记了这些痛苦的日子了。但是事实上这个设计理念就是有点反人类的。所以后面就打了一个补丁来拯救我们程序员，加入了 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-box","attrs":{}}],"attrs":{}},{"type":"text","text":"。从此之后程序员就又可以开心的敲代码了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/d9/d96e8f326989bd3a18822b8c629efdc3.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"border-box","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-box","attrs":{}}],"attrs":{}},{"type":"text","text":"，我们的 width 就包含了 padding 和 border 的尺寸了。回去看看我们盒模型的图，我们可以看到","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-box","attrs":{}}],"attrs":{}},{"type":"text","text":"的黄色线括着的区域，它所占据的空间和范围。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这样当我们给一个盒，padding 和 border 的时候，就不会影响我们给予盒子的 width。这样我们就可以保证我们盒子在没有 margin 的时候它所占据的空间就是与我们 width 一致的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"呈现出来的效果就是 padding 和 border 都会往内挤压空间，而不会影响盒子的宽度。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里我们就讲完盒模型了，我们就发现它所影响的属性就是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box-sizing","attrs":{}}],"attrs":{}},{"type":"text","text":"这几个属性。这些都是影响我们盒模型的总体尺寸，在排版中会影响着这个盒模型所占据的范围。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b3/b34c995f506fd74ab4d6e4adb20b4706.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"正常流","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS 的排版其实是有三代的排版技术的：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第一代就是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"正常流","attrs":{}}],"attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第二代就是基于 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Flex","attrs":{}}],"attrs":{}},{"type":"text","text":" 的排版","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第三代就是基于 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Grid","attrs":{}}],"attrs":{}},{"type":"text","text":" 的排版","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"结合最近推出的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"CSS Houdini","attrs":{}}],"attrs":{}},{"type":"text","text":"，可能更接近的是 3.5 代，它是一种完全自由的，允许使用 JavaScript 干预的排版","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"目前主流都是在使用 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"flex","attrs":{}}],"attrs":{}},{"type":"text","text":" 布局。相比 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"flex","attrs":{}}],"attrs":{}},{"type":"text","text":"，其实正常流并没有变得更简单，反而是更复杂了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不过挺有意思的是，flex 它比前面的第一代的排版技术要简单，比他后面一代的 grid 也简单。个人认为 flex 是最简单并且最容易理解的一代排版技术。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"正常流呢，其实它能力最差，但是反而他的机制很复杂。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"排版","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/45/45be138230aedfd8337ed1668571b382.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果我们看到上面这个图，可能有一些同学知道是什么，有一些同学完全不知道他在干什么。其实这个就是 80 年代印刷厂工人在进行排版工作。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这个传统的排版技术，其实与我们现在网页的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"layout","attrs":{}}],"attrs":{}},{"type":"text","text":"是息息相关的。在很多文章中，我们会把","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"layout","attrs":{}}],"attrs":{}},{"type":"text","text":"翻译成","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"排版","attrs":{}}],"attrs":{}},{"type":"text","text":"，有时候也会翻译成","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"布局","attrs":{}}],"attrs":{}},{"type":"text","text":"。但是我个人也觉得翻译成","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"排版","attrs":{}}],"attrs":{}},{"type":"text","text":"是最贴切的。因为 CSS 当中的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"layout","attrs":{}}],"attrs":{}},{"type":"text","text":"是源自于传统的排版技术。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"传统的排版方式，我们需要先把字版放入一个一个字框里面，按照文字的顺序排列号，然后再把这些字框一个一个的排列进我们的排版框里面。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以所谓排版就给我们所有可见的东西放到正确的位置上去。而在 HTML 里面，我们是有 \"盒\" 这样一个东西，在 CSS 的排版里我们","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"只排两样东西","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":"1","normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"盒","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"文字","attrs":{}}]}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一切 CSS 的排版，都不会逃出这","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"盒","attrs":{}}],"attrs":{}},{"type":"text","text":"与","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"文字","attrs":{}}],"attrs":{}},{"type":"text","text":"这样两东西。所以我们的排版就是给每一个文字安排到正确的位置上，然后给每一个盒安排到正确的位置上。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在不考虑盒模型的情况下，我们需要关注的就是位置和尺寸，所以排版中并没有什么特殊的内容。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"字排版","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/4d/4d6fe0e01414cb7c9a3977fddd24eb65.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们在进入正常流之前，我们一起来先思考一下我们写字的时候是怎么写的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其实我们写字的时候，某种意义上讲也是一个排版的过程。很多同学们小时候写作文的时候都会用到上面这种有格子的稿纸。我们都记得这个作文稿纸上都是有一个一个的格子的，其实这相当于一个已经有了排版。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果在我们稿纸上没有格子呢，我们就要自己来决定每一行要写多少个字，每一个字有多高，然后怎么分段呢？等等这些问题，都是在我们小时候写字时需要关注的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那么我们来总结一下写字有哪些规则呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"从左到右书写","attrs":{}},{"type":"text","text":" —— 我们都是依次从左向右书写作文的","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"同一行写的文字都是对齐的","attrs":{}},{"type":"text","text":" —— 写中文的时候我们是对齐到格子的顶和底，写英文的时候，像 e，a 这些字母它就有一条基线要去对齐。所以小时候英文的书写本都是四线本。","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"一行写满了，就换到下一行","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其实以上的这些规则也就是我们说的 \"","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"正常流 ( Normal Flow )","attrs":{}}],"attrs":{}},{"type":"text","text":"\"，所以正常流为什么正常呢？因为正常流就是与我们平时书写文字的习惯一致。无论是中文也好，英文也好，它们都是遵循这种自然的排版方式的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"有一些我们早期进入前端的同学，就会发现其实正常流里面，有很多特别不正常的东西，特别的反直觉，反人类的东西。为什么这么奇怪的东西要叫正常流呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/60/602fcc594318c46791061cd03c6d8c1d.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"很负责任的告诉大家，其实一点都不奇怪。如果我们知道前端的 HTML 和 CSS 的排版概念都是源自于专业排版知识，而这些排版使用方式如果出现在我们的书籍里面，我们都会觉得挺自然的。但是真正让我们去理解这些知识，我们都会觉得很困难。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这个就可以追溯到 HTML 最早期整个的排版设计，都是从文字出版行业过来的专家所做的。所以它使用的思路都是那个时代的一个专业的思路。跟我们自然人脑子里面的理解，可能就会有一些差异了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"正常流排版","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下来我们就正式进入正常流的排版讲解。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"正常流排版的整个过程，与实现 flex 的过程比较类似，有这几个步骤：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"收集盒与文字进行","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"计算盒与文字在行中的排布","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"计算行与行之间的排布","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们发现其实这个与我们 flex 的排版非常的像。其实我们会发现所有的排版算法，基本上都是差不多的。不论是哪个软件，哪个规则，它们都是这么几个步骤。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下来我们来看看具体的一个排布规则：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/71/716969f2334c4182fbba6fca2962b20d.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当文字和盒在一行里面的时候，它们是会从左向右排布的。假设我们先不考虑 writing-mode 的事情，这里所说的从左向右排就意味着文字和盒有一个对齐的规则。这个就比我们小时候写作文的那个格子要复杂了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在写作文的格子稿纸上，我们是不需要考虑图片和其他元素与我们的文字混排的情况的。我们在写作文的时候不会写着写着在旁边话一个插图什么的。但是我们发现书里面是有的，特别是专业的书籍基本上都是图文内容。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这些书里面都是写着写着就会插入一个图表，这些图表有的是在行内放一个小的图片，有的是里面加一个小图标。这些都是行内盒，更准确的说这叫 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"inline-level-box","attrs":{}}],"attrs":{}},{"type":"text","text":"，就是行内级别的盒。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"还有一些我们需要插入一个大图，比如说一个统计的数据，因为这种一般来说高度都比较高，放在一行里面会很奇怪。所以这个时候我们会让它单独占一行。这种类型的盒，我们就把它称为 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block-level-box","attrs":{}}],"attrs":{}},{"type":"text","text":" ，也叫块级盒。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以文字和 inline level 行内的盒排出来的行，我们就叫做 \"","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"行盒 ( line-box )","attrs":{}}],"attrs":{}},{"type":"text","text":"\"，然后一个自然的正常流，整体来看就是一个个的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"line-box","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block-level-box","attrs":{}}],"attrs":{}},{"type":"text","text":" 的从上到下的摆布。如果没有 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block-level-box","attrs":{}}],"attrs":{}},{"type":"text","text":"，那么都是行盒从上到下排布。而每个行盒的内部都是从左到右的排布。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其实上面讲到的两种情况都是有一个名字的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/1f/1f1216979ce1a9d5435eeba0e3868574.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"块级排布的我们就叫 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"BFC","attrs":{}}],"attrs":{}},{"type":"text","text":" —— Block level formatting context (块级格式化上下文)","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"行内排布的我们就叫 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"IFC","attrs":{}}],"attrs":{}},{"type":"text","text":" —— Inline level formatting context (行内级格式化上下文)","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"很多在比较早期学习前端，甚至在一些 \"0 基础\" 的班里面学前端的同学，都会听说过 \"块级元素\" 和 \"行内元素\" 两种说法。其实与我们讲到的 BFC 和 IFC 就是这个概念最原本的意思。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"行级排布","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f9/f97792f7abfd2267e14635467e8c89e0.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"小时候我们在学习英文的时候，就会使用过这种 4 线本的格式来书写英文。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们可以注意到在书写 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"example","attrs":{}}],"attrs":{}},{"type":"text","text":" 这个英文的时候，我们可以看到 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"e","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"x","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"a","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"m","attrs":{}}],"attrs":{}},{"type":"text","text":" 都是在一行之内的。但是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"p","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"l","attrs":{}}],"attrs":{}},{"type":"text","text":" 就不一样了。","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"p","attrs":{}}],"attrs":{}},{"type":"text","text":" 的尾巴是稍微往下突出的，而 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"l","attrs":{}}],"attrs":{}},{"type":"text","text":" 它的头部是稍微往上突出的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以英文的字母呢，总是会有一些字母会往上或者往下伸出一块的。这个也是英文书写的一些规范，因为遵循这些规范才能让我们的字母在书写的时候好看。基本上所有字母的下缘都是需要对准一条线的，那就是倒数第二条钱（在图片中的黄色的线）。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这条线也叫 \"","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"基线","attrs":{}}],"attrs":{}},{"type":"text","text":"\"，而这个规则就叫做 \"","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"基线对齐","attrs":{}}],"attrs":{}},{"type":"text","text":"\"。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其实各国的文字都是有一条基线对齐的规则，但是不同的国家的文字依赖的基线的位置不一样。比如说中文需要和英文混排的话，就会出现一个基线的偏移。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 像中文这种类型的字，都会以上文下文这种边缘作为基础线去对齐的。但是我们也是可以认为这些类型的文字也是基于 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"基线 (baseline)","attrs":{}}],"attrs":{}},{"type":"text","text":" 对齐的。我们可以理解为它们只是带了一定的偏移。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"字形定义","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下来我们一起来了解一下，一个字形它是怎么样去定义的。在之前的文章中我们有讲到一些字符集这方面的基础知识。其实一个字符就是一个码点，以为着它的形状是由我们的字体来决定的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面的两张图是来自于一个著名的 C++ 的底层库，叫做 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"freeType","attrs":{}}],"attrs":{}},{"type":"text","text":"。这个库就是处理各种字体文件成为抽象，并且它是一个开源界大部分的软件都会去使用的一个字体库。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这个库中，它从字体中抽象出这么一个定义：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"任何一个文字，都是有一个宽和高，除此之外还有一条基线的定义。（如何没有这个基线的定义，我们的字体是不成立的，也没有办法用它来进行排版）。这个定义就叫做 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Glyph Metrics","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们先来看看第一张图：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/a1/a1589b17ae4b9985827533f6b9b44e9b.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先我们看到 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"origin","attrs":{}}],"attrs":{}},{"type":"text","text":"，也就是一个字体的原点。而原点标识的位置就是我们文字的基线的位置，而这个文字都是以基线作为原点的座标，然后再用这个座标来定义这个文字的位置。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以说基线就是在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"x = 0","attrs":{}}],"attrs":{}},{"type":"text","text":" 这个横向的座标，然后这个文字就会有一个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"xMax","attrs":{}}],"attrs":{}},{"type":"text","text":" 和一个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"yMax","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"xMax","attrs":{}}],"attrs":{}},{"type":"text","text":" 就是文字最尾端的座标位置，而 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"yMax","attrs":{}}],"attrs":{}},{"type":"text","text":" 就是文字最顶端的位置。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然后文字也有相反的两个值 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"xMin","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"yMin","attrs":{}}],"attrs":{}},{"type":"text","text":"，而这两个值就是刚好相反，是文字开始的位置和底部的位置。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"也可以理解为从底缘的基线到文字的最顶端的距离，这就是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"yMax","attrs":{}}],"attrs":{}},{"type":"text","text":"。而底缘的基线到文字的最底端的距离就是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"yMin","attrs":{}}],"attrs":{}},{"type":"text","text":"。而 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"xMin","attrs":{}}],"attrs":{}},{"type":"text","text":" 到 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"xMax","attrs":{}}],"attrs":{}},{"type":"text","text":"，从原点到文字开始和文字结束的距离。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最后这里面的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"advance","attrs":{}}],"attrs":{}},{"type":"text","text":" 就是整个字占用的空间。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以上讲的就是横向排版的时候，而纵排又有另外一套的逻辑：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/82/828c2199c08d314743f06bd95c5b9c6e.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们需要理解一些文本这样的基础概念，然后我们才能更好的理解文本和盒的混排。 ","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"行模型","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/17/175985b1b7b2d988a2c0390e36c8e13b.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们大致了解了这个文字在字体里面是如何定义之后，我们就可以来讲讲 CSS 里面的行模型了。这里我们重点讲 5 条线，其他还有一些线和位置例如 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"sub","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"sup","attrs":{}}],"attrs":{}},{"type":"text","text":" 这种我们就不去讲了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这个 base-line 和文字的顶原和底缘，分别叫做 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"base-line","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-top","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":"。就是图中的一条黄线和两条绿线。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"结合刚刚讲到的，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"base-line","attrs":{}}],"attrs":{}},{"type":"text","text":" 就是用来与英文字母对齐的。然后这里面有一个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-top","attrs":{}}],"attrs":{}},{"type":"text","text":" 和一个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":"，如果我们的字体大小不变，这两个线是不会变得。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果我们使用多个文字的字体混排的话，这个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-top","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":" 是由 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"fontSize","attrs":{}}],"attrs":{}},{"type":"text","text":" 最大的一个字体决定的。然后这个文字的上缘和下缘可以理解为两条固定的线。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果行高是大于文字的高度的时候，我们就会有 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"line-top","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"line-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":" ，就是在图中的两条白色的线。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"好！如果我们只有文字的话，这个行模型就这样子排布的。但是我们一旦涉及到跟盒的混排，就会涉及到一个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"line-top","attrs":{}}],"attrs":{}},{"type":"text","text":"和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"line-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":" 的偏移问题。 ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/fd/fd92b790e1561f883682942ad9843a54.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当我们的盒足够大的时候，我们的盒子是从 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":" 去对齐的，所以它就有可能把这个高度撑开。这个时候 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"line-top","attrs":{}}],"attrs":{}},{"type":"text","text":" 就会从虚线的位置，移动到了白色的实线的位置。（看上面的图）","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这个现象也是在正常流当中，处理行模型中非常麻烦的一个现象。因为盒的","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"先后顺序和尺寸","attrs":{}},{"type":"text","text":"都是影响 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"line-top","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"line-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":" 的位置。但是盒是不会影响 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-top","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":" 的。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"代码演示","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下来我们来一起看看在浏览器中的实际效果是怎么样，需要在浏览器上看效果，我们就需要些一段代码了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":"1","normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"我们先建立一个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"wrapper","attrs":{}}],"attrs":{}},{"type":"text","text":" 把我们的内容包裹起来，然后给一个背景颜色","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"用 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"span","attrs":{}}],"attrs":{}},{"type":"text","text":" 标签加入文字","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"在用 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"div","attrs":{}}],"attrs":{}},{"type":"text","text":" 标签建立一个元素，然后给予这个元素 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"display: inline-block","attrs":{}}],"attrs":{}},{"type":"text","text":"，把元素设置成","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"行内盒","attrs":{}}],"attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"text","text":"最后我们加入","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"基线","attrs":{}}],"attrs":{}},{"type":"text","text":"的元素 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"base-line","attrs":{}}],"attrs":{}},{"type":"text","text":"，用这个来展示我们的基线是在哪个位置","attrs":{}}]}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n\n

\n

\n

\n

\n Hello world 中文 \n

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最后呈现出来的效果如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c7/c76f605141d748c943fbfb0a66c69c2c.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里我们发现，我们的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"行内盒","attrs":{}}],"attrs":{}},{"type":"text","text":"是默认与基线对齐的规则。也就是说","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"盒的下边缘会和文字的基线去做对齐","attrs":{}},{"type":"text","text":"。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"好，如果我们在盒子里面加文字又会怎么样呢？我们来试试看。 ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里我们在盒里面加入一个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"b","attrs":{}}],"attrs":{}},{"type":"text","text":" 的文字。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文 \n

b

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最后呈现出来的效果就是这样的：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ca/ca024fbc4f118bb8fd5713e98b523e68.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里我们会发现盒子的对齐的位置发生了变化。盒的基线变成了它里面文字的最后一行的基线。","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"也就是说，当一个盒子里面有文字的时候，这个盒子的对齐就会基于里面文字的基线做对齐。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里如果我们在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"b","attrs":{}}],"attrs":{}},{"type":"text","text":" 的下一行加一个文字 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"c","attrs":{}}],"attrs":{}},{"type":"text","text":"，我们又会发现另一种现象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文 \n

b
c

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/1d/1df5585a24ae0eb593109f8d242c0488.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这个是特别需要注意的问题，行内盒 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"inline-block","attrs":{}}],"attrs":{}},{"type":"text","text":" 的基线是随着自己里面的文字去变化的。所以说大部分情况下是不建议大家给行内盒使用基线对齐的。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以我们在使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"行内盒","attrs":{}}],"attrs":{}},{"type":"text","text":"的时候就需要给一个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vertical-align","attrs":{}}],"attrs":{}},{"type":"text","text":"，属性值我们可以给 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"top","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"bottom","attrs":{}}],"attrs":{}},{"type":"text","text":"或者是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"middle","attrs":{}}],"attrs":{}},{"type":"text","text":"都是可以的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们先看看 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vertical-align: top","attrs":{}}],"attrs":{}},{"type":"text","text":" —— 顶缘对齐","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文 \n

b
c

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/9d/9d0e7f89f2a7c49a77d14368c1872d4f.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"给 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"top","attrs":{}}],"attrs":{}},{"type":"text","text":" 就是跟行的顶缘对齐，因为我们的外包框给的是 100px，所以它会把这一行撑开。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然后我们来看看 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vertical-align: bottom","attrs":{}}],"attrs":{}},{"type":"text","text":" —— 底缘对齐","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文 \n

b
c

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/2f/2fb8ad8f5e5ae0d3f6ca8e32139b0b43.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"与顶缘对齐不一样就是这个时候，盒就会从下面往上撑开。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最后我们看看 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vertical-align: middle","attrs":{}}],"attrs":{}},{"type":"text","text":" —— 中线对齐","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文 \n

b
c

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/36/361d3d1f0219243fa52cfc467f258228.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"顾名思义，这个时候盒就会与文字的中线对齐。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其实这里我们还可以让盒与文字的顶缘和底缘对齐，也就是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-top","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们来看看 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":" 是怎么样的：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文 \n

b
c

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/7d/7d35a07b66d6b92f40e0dbaa6da019ea.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"盒一样会把上边缘和下边缘撑开。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果我们看到上面的如，紫色的线就是我们的基线，但是我们也可看看文字的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"中心线","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"顶缘线","attrs":{}}],"attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"底缘线","attrs":{}}],"attrs":{}},{"type":"text","text":"的位置。我们只需要改动 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"base-line","attrs":{}}],"attrs":{}},{"type":"text","text":" 这个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"div","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vertical-align","attrs":{}}],"attrs":{}},{"type":"text","text":" 属性即可：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们先看看中线：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文 \n

b
c

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/3f/3f39dffcd546c9c5161871762846876f.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"顶缘线：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文 \n

b
c

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f9/f92ebbc237afeed555da12c91c41358a.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"底缘线：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文 \n

b
c

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/39/3900c239253fef7151398a4aad53c440.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里我们可以观察到，我们的盒是把我们的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"顶缘线 (top-line)","attrs":{}}],"attrs":{}},{"type":"text","text":" 往上撑开了的，所以也证明我们行内盒是会把顶缘或者下缘撑开的。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"为了让大家可以更加直观的看到顶缘和底缘被撑开的现象，我们可以加多一个行内盒，同时把顶缘和底缘同时撑开。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

\n Hello world 中文\n

\n b\n
\n c\n

\n

\n b\n
\n c\n

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/e5/e5cf0c1bb27f2df7bfd924d0c996b4fa.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里我们可以明显发现，我们外包框的高度已经被撑开了，所以外包框的高度已经不是等于行内盒的高度了，应为它的顶缘和底缘线都被撑开了。这个显现就是行内盒不同的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"align","attrs":{}}],"attrs":{}},{"type":"text","text":" 对齐所导致的，所以不同的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vertical-align","attrs":{}}],"attrs":{}},{"type":"text","text":" 对整个行的高度是有比较多的影响的。所以相对于 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"flex","attrs":{}}],"attrs":{}},{"type":"text","text":" 布局，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"flex","attrs":{}}],"attrs":{}},{"type":"text","text":" 就只需要去考虑最高的一个元素，但是在正常流里面的行模型还是比较复杂的。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最后我给大家附上这段代码的演示：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"http://tridiamond.tech/frontend-tutorials/css-tutorials/layouts/inline-model.html","title":""},"content":[{"type":"text","text":"查看效果","attrs":{}}]},{"type":"text","text":" ｜ ","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/TriDiamond/frontend-tutorials/blob/master/css-tutorials/layouts/inline-model.html","title":""},"content":[{"type":"text","text":"查看代码","attrs":{}}]},{"type":"text","text":"｜ ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"喜欢的同学 🌟star 一下谢谢！","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"块级排布","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下来我们来一起了解一下，正常流的块级排布。我们在上一部分已经了解了块级排布了。接下来我们一起来了解行级与块级的盒之间是如何排布的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"之前讲到的 BFC 和 IFC 的基本定义的时候，我们对块级排布已经有一个基础的认识了。但是呢正常流当中还有两个非常复杂的机制，我们需要先了解一下。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Float 和 Clear","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Float 和 Clear 也称为 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"浮动","attrs":{}}],"attrs":{}},{"type":"text","text":" 与 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"清除浮动","attrs":{}}],"attrs":{}},{"type":"text","text":"。首先浮动元素严格来说已经脱离了正常流，当时他又依附于正常流去定义的一类排布方式。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先我们先来讲一下 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float","attrs":{}}],"attrs":{}},{"type":"text","text":" 的基本规则。根据 W3C 的标准，float 可对它有一下定义：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"float 元素可以先排到页面的某一个特定的位置，同时可以当它是正常流里的元素。然后如果它的属性中有 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float","attrs":{}}],"attrs":{}},{"type":"text","text":" 的时候，这个元素就会朝着 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float","attrs":{}}],"attrs":{}},{"type":"text","text":" 属性定义的方向去挤。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"假设元素加入一个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float: left","attrs":{}}],"attrs":{}},{"type":"text","text":" 属性，这个时候，这个元素就会往左边去挤，如下图：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/db/db323ab20ce9ccfdb4a8d5c750c41ae9.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通过上面这个动画，我们会发现，原来已经存在的文字位置就被浮动了的元素所 \"盖住\" 了。所以呢这个时候就会根据 float 所占据的区域去调整行盒的位置。因为计算位置的时候我们还没有去计算每一个文字具体的位置，所以说理论上来讲这个地方的文字是没有重排的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以当一个元素变成了浮动时，它所占据的位置的原本内容，就会根据 float 之后占据的宽度来进行调整。而 float 显著的特征就是，它会影响我们生成这些行盒的尺寸。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以在文字调整了之后我们最终看到浏览器呈现的效果是这样的：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/e8/e8a84a87f9aa2b02ccfec809a7aa24f4.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"float 不止会影响自己所在的行，","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"凡是它的高度所占据的范围内的所有行盒都会根据 float 元素的尺寸调整自己的大小","attrs":{}},{"type":"text","text":"。如果超出了这个 float 范围的就不考虑了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ad/ad6845e5ed7aeb9ee7eaa7d7b39e643a.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果我们有两个 float 元素的时候，还会出现一种情况。假设我们现在有两个 float 元素，一个是 float: right 在右边，然后再后面又加入了一个 float 元素，而这个新的 float 元素一样也是向右浮动的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这个时候我们会发现这个新的 float 元素也会受到上一个 float 元素影响，新的 float 元素是无法占据上一个 float 元素的位置。这时候的这个现象就是 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"float 元素相堆叠的效果","attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c3/c3606a35bfaef664dab6dc7b43f13127.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当让如果我们继续添加 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素，并且也是浮动一样的方向的时候，都会受到上面多个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素的影响并且继续堆叠。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下来我们来看看一段实例代码：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n\n

\n 「float-放置的位置」\n

\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 「float-放置的位置」\n

\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 「float-放置的位置」\n

\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 「float-放置的位置」\n

\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/42/424e2075f53abf32c855fbb1a02e9b87.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里面 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"「float-放置的位置」","attrs":{}}],"attrs":{}},{"type":"text","text":" 就是原本这个 float 元素的代码所放置的位置。但是经过了 float 之后，所有的 float 元素都会被挤到最右边的位置。最后所有行盒的生成都会围绕着所有的 float 元素，同时它们都不会占据 float 元素的空间。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这个时候当我们把外框的宽度增加的时候，就会发现这些 float 元素就会出现堆叠的现象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/e9/e950508b2627ca8916952b37faf1f1c7.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"看到这里肯定很多同学说觉得 \"这样排版不行呀，老板肯定不收货呀\"，\"UI 设计师肯定要吊打我们啦\"。是的这样的排版确实是不正常的，而且一般来说也没有这么排版的需求呢。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以这里我们可以给 float 加一个 clear 属性，这样我们就可以让它们强制换行了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n\n

\n 「float-放置的位置」\n

\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 「float-放置的位置」\n

\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 「float-放置的位置」\n

\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 「float-放置的位置」\n

\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/8a/8a591bd74186704913363d95eecb207d.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"http://tridiamond.tech/frontend-tutorials/css-tutorials/layouts/float-example-1.html","title":""},"content":[{"type":"text","text":"查看效果","attrs":{}}]},{"type":"text","text":" ｜ ","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/TriDiamond/frontend-tutorials/blob/master/css-tutorials/layouts/float-example-1.html","title":""},"content":[{"type":"text","text":"查看代码","attrs":{}}]},{"type":"text","text":"｜ ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"喜欢的同学 🌟star 一下谢谢！","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所谓的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"clear","attrs":{}}],"attrs":{}},{"type":"text","text":" 有的翻译成 \"清除浮动\"，但是我觉得它不是清除浮动的意思。理论上来说它是 \"","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"找一个干净的空间来执行浮动","attrs":{}},{"type":"text","text":"\" 的意思。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"比如说 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"clear: right","attrs":{}}],"attrs":{}},{"type":"text","text":"，就是要在右边找到一个干净的空间来执行这个浮动的操作。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以看到上图的效果，当我们加入了 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"clear: right","attrs":{}}],"attrs":{}},{"type":"text","text":" 之后，第一个后面的元素都不受第一个 float 元素的影响，各自找到一个干净的空间进行浮动。所以 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"clear","attrs":{}}],"attrs":{}},{"type":"text","text":" 是有分 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"left","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"right","attrs":{}}],"attrs":{}},{"type":"text","text":"，指的是向左或者右找干净的空间进行浮动。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"虽然说 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float","attrs":{}}],"attrs":{}},{"type":"text","text":" 这种浮动布局给我们带来了不少的麻烦，但是 float 的堆叠、自动换行（或者使用 clear 去换行）的行为是可以帮助我们去进行一些有用的布局的。因为我们的正常流的布局在早年没有 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"flex","attrs":{}}],"attrs":{}},{"type":"text","text":"的情况下，正常流的布局下完成一些著名的 CSS 布局需求的时候是非常的困难的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"所以大家都产生这种使用 float 来代替正常流的 inline-block 来进行布局的技术","attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下来我们看看下一段代码实例：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里我们给每一个元素都加上一个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float","attrs":{}}],"attrs":{}},{"type":"text","text":"，这时候元素跟元素之间的表现就很像一个正常流了。因为 float 元素它占满了之后还是会换行的。那么我们来看一下代码：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n\n

1

\n

2

\n

3

\n

4

\n

5

\n

6

\n

7

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/16/166bfcb7f6c37f5e797df619a1ce4493.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里我们可以看到，float 是完全可以变成和正常流一样排成一行的，当我们缩小宽度的时候，不够位置的元素就会自动换到下一行。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UsH8GwbC-1602443824687)(/Users/tridiamond/Library/Application Support/typora-user-images/image-20201006194359630.png)]","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这个时候如果我们想执行一个强制换行怎么办呢？这个时候我们就可以拿出我们的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"clear","attrs":{}}],"attrs":{}},{"type":"text","text":"。比如说我们想在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"3","attrs":{}}],"attrs":{}},{"type":"text","text":" 后面开始强制换行，我们就可以在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"4","attrs":{}}],"attrs":{}},{"type":"text","text":" 的浮动元素上加入 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"clear: left","attrs":{}}],"attrs":{}},{"type":"text","text":" 即可。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里要注意的是，float 它是不认 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"
","attrs":{}}],"attrs":{}},{"type":"text","text":" 的，如果我们在一个 float 元素的后面加入 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"
","attrs":{}}],"attrs":{}},{"type":"text","text":" 是无法让他强制换行的。因为 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"br","attrs":{}}],"attrs":{}},{"type":"text","text":" 是正常流的换行，对 float 是没有效的。 ","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n\n

1

\n

2

\n

3

\n

4

\n

5

\n

6

\n

7

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/fe/feb979222ca4fcdb169686aa44ff91b1.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们平时做布局的时候，基本上我们都会使用盒而不是文字。我们很少有真正意义上需要像原始的 float 设计一样用图文混排的设计（就是向我们看的图书一样的布局方式）。在网页上布局，一般来说我们都是针对同一个级别，我们都是几个盒子排成正确的形状来完成页面上的布局。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以说 float 这种布局的技术，在比较早期的时代是非常流行的。不过到了现在的前端技术时代，float 的布局方式已经完全被 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Flexbox","attrs":{}}],"attrs":{}},{"type":"text","text":" 技术所替代了。这里只是让大家知道一下，布局的历史里面有这么一个用法。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果有同学遇到了一些需要维护非常古老的代码，就有可能看到这个技术。但是我不推荐大家当今还去使用这项技术。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"http://tridiamond.tech/frontend-tutorials/css-tutorials/layouts/float-example-2.html","title":""},"content":[{"type":"text","text":"查看效果","attrs":{}}]},{"type":"text","text":" ｜ ","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/TriDiamond/frontend-tutorials/blob/master/css-tutorials/layouts/float-example-2.html","title":""},"content":[{"type":"text","text":"查看代码","attrs":{}}]},{"type":"text","text":" ｜ ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"喜欢的同学 🌟star 一下谢谢！","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Margin 折叠","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下来我们来讲讲正常流里面的一种现象，叫做 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin 折叠","attrs":{}}],"attrs":{}},{"type":"text","text":"。在 BFC 里我们的元素是顺次从上往下排的，但是顺次从上往下排的时候还是会受它的盒模型影响的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"就是有这么一个现象，在一个从上往下排布的 BFC 里面，有一个元素它有 margin，接着还有一个元素，它也有 margin。那么这个时候第二个元素它应该怎么排呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"直接告诉我们应该是两个元素的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin","attrs":{}}],"attrs":{}},{"type":"text","text":" 是应该会叠加，如果第一个的 margin 是 10，第二个是 15，那么两个元素中间就是 10 + 15 = 25。对吧？不是的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/2a/2adb9b21a8f92100c4d7ba7a3a59dadf.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"它们并不是把两个 margin 的空白都留出来。而是会让他们两个发生一个堆叠的这样的现象。最后叠出来的高度是跟最大的 margin 的高度相等的。如果一个是 10px，一个是 15px 的 margin，最后两个元素之间的空间就是 15px（使用了两个 margin 的最大值）。这个现象就是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Margin Collapse (留白折叠/边距折叠)","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ae/ae022b34dd926a7468e439c3ea756ed2.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"有些同学觉得真的是匪夷所思，根本不符合常理。但是其实这个是一个排版里面的要求，因为在我们的排版当中，任何一个元素，它的盒模型里面所谓的 margin \"","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"只是要求周围有这么多的空间是留白的，而不会说要求元素与元素之间的边距格子都有相对应的空白","attrs":{}},{"type":"text","text":"\"。所以只要元素的周围的留白的空间够了，自然就是一个合理的排版方式。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这个可以说也是继承了印刷行业，古老的印刷行业的排版体系中，这种 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Margin Collapse","attrs":{}}],"attrs":{}},{"type":"text","text":" 是一个非常自然的现象和思路。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们要注意，这种 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Margin Collapse","attrs":{}}],"attrs":{}},{"type":"text","text":" 只会发生在 BFC 里面。它不会发生在 IFC 或者其他的排版方式里面，比如说 flex、grid 等都不会有 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Margin Collapse","attrs":{}}],"attrs":{}},{"type":"text","text":" 的。所以","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"只有正常流中的 BFC 会发生边距折叠！","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其实我们单看 float和单看边距折叠，它们都不太难，我们但看 BFC 也不太难。但是如果我们三个现象叠加在一起，基本上就是我们古代前端最大的难题了。也就是说大家平时会看到一些资料里面讲，面试的时候遇到的 BFC 问题就都在这个三个现象相叠加的。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"BFC 合并","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下来我们来认识一下正常流最困难的一部分，\"","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"BFC 合并","attrs":{}}],"attrs":{}},{"type":"text","text":"\"。在讲到具体的知识之前我们先来了解一下几个概念。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"BFC 代表的是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Block Formatting Context (块级格式化上下文)","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Block (块)","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们先大致了解一下 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Block","attrs":{}}],"attrs":{}},{"type":"text","text":" 里面有哪些：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Block Container —— 是在 CSS2.1 标准里面定义的 ","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" + 里面能装 BFC 的盒","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" + 能容纳正常流的盒，里面就有 BFC","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Block-level Box","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" + 外面有 BFC 的盒","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" + 也就是说它能够被放入 BFC 的这种盒子里","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Block Box = Block Container + Block-level Box","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" + 就是上面两个之和","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" + 里外都有 BFC 的盒","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里我们就逐个拆开来讲一下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Block Container","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Block Containter 基本上是一些 display 的效果：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"block","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"inline-block","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"table-cell","attrs":{}},{"type":"text","text":" —— 里面都是正常流，但是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"table-row","attrs":{}}],"attrs":{}},{"type":"text","text":" 就不是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block cotainer","attrs":{}}],"attrs":{}},{"type":"text","text":" 了，因为它里面是 table-cell，所以不可能是正常流","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"flex item","attrs":{}},{"type":"text","text":" —— ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"display: flex","attrs":{}}],"attrs":{}},{"type":"text","text":" 的元素不是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block container","attrs":{}}],"attrs":{}},{"type":"text","text":"，但是 flex 的子元素 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"flex item","attrs":{}}],"attrs":{}},{"type":"text","text":" 如果它们没有特殊的 display 属性的话它们都是 block container。 ","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"grid cell","attrs":{}},{"type":"text","text":" —— grid 也是有 cell 的，所有 grid 的 cell 默认也都是 block container","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"table-caption","attrs":{}},{"type":"text","text":" —— table 中有 table-caption (表格标题)，它里面也是正常流","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"任何一个元素里面只要不是特殊 display 模式的，它里面默认就是正常流。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Block-level Box","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们大多数的元素的 display 的值都是有一对的。一个是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block-level","attrs":{}}],"attrs":{}},{"type":"text","text":" 的，一个是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"inline-level","attrs":{}}],"attrs":{}},{"type":"text","text":" 的。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f1/f15f4a8bc998d900852fb3cb6fee3147.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 display 的最新标准里面，已经把 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block-level","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"inline-level","attrs":{}}],"attrs":{}},{"type":"text","text":" 拆成了单独的属性。Display 会出现这个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"inner","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"outer","attrs":{}}],"attrs":{}},{"type":"text","text":"，这里就是给 display 做了系统性的分解。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里还有一种非常特殊的 display 属性叫 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"run-in","attrs":{}}],"attrs":{}},{"type":"text","text":"。它跟着自己上一个元素来，有时候是 inline-level，有的时候是 block-level。这个属性我们知道就可以了，在工作中基本上没有见过有例子有运用到 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"run-in","attrs":{}}],"attrs":{}},{"type":"text","text":" 这个属性。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Block Box","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在标准里面有这么一个描述：\"","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"什么时候什么样的盒，会创建 BFC 呢？","attrs":{}},{"type":"text","text":"\"","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"设立 BFC (Establish BFC)","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以下情况下会 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"设立 BFC","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"- ","attrs":{}},{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"floats","attrs":{}},{"type":"text","text":" —— 浮动的元素里面就是一个正常流，所以会创建 BFC","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"- ","attrs":{}},{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"Abusolutely positioned elements","attrs":{}},{"type":"text","text":" —— 绝对定位的元素里面也会创建 BFC","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"- ","attrs":{}},{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"block containers (such as inline-blocks, table-cells, and table-captions)","attrs":{}},{"type":"text","text":" that are not block boxes —— 就是这个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block container","attrs":{}}],"attrs":{}},{"type":"text","text":" 但是不是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block box","attrs":{}}],"attrs":{}},{"type":"text","text":" (也就是不是 block-level ) 会创建 BFC，包括以下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" - inline-blocks","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" - table-cells","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" - table-captions","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" - Flex items","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" - grid cell","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" - 等等...","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"- _and block boxes with ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" other than ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"visible","attrs":{}}],"attrs":{}},{"type":"text","text":"_ —— 就是拥有 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" 属性，但是不是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"visible","attrs":{}}],"attrs":{}},{"type":"text","text":" 的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block box","attrs":{}}],"attrs":{}},{"type":"text","text":" 也会创建 BFC","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以设立 BFC 一共有 4 大类，但是要记住这些确实不太好记。不过换一种方式来理解就好记一点了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"默认这些能容纳正常流的盒，我们都认为它们会创建 BFC，但是只有一种情况例外：就是 block box 里外都是 BFC 并且 overflow 是 visible。用公式来记就是这个：\"","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"block box && overflow:visible","attrs":{}},{"type":"text","text":"\"","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这个其实是非常合理的，它里外都是 BFC 而且它的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" 是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"visible","attrs":{}}],"attrs":{}},{"type":"text","text":"，那不就相当于没有 BFC 了吗？所以这个时候会发生 BFC 合并。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"BFC 合并","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那 BFC 合并之后会发生什么呢？这里我们就需要了解两个最重要的 BFC 合并之后的影响：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"BFC 合并与 float","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因为 BFC 发生了合并，所以里面的行盒跟这个 float就有了一定的影响。 ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"正常的来讲我们放一个 block box 它的 overflow 不是 visible，这个时候它会创建 BFC 并且整个 block box 放进 BFC 里面。那么整个就会受 BFC 影响，如果不创建 BFC它里面的行盒就会受 float 的影响。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下来我们用一段代码来看看其中的现象：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n\n

\n

\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里因为我们的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text","attrs":{}}],"attrs":{}},{"type":"text","text":" 盒子给予了 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow: visible","attrs":{}}],"attrs":{}},{"type":"text","text":"，所以这个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" 属性值是不满足创建 BFC 的条件的。所以我们的文字的盒子就会像不存在一样，文字就会环绕着外面的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float-box","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素来进行排布。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/13/13c38ef9024ac1e67db95384ccc92734.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果我们把 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" 的属性值改为 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"hidden","attrs":{}}],"attrs":{}},{"type":"text","text":" 的话，那么 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text","attrs":{}}],"attrs":{}},{"type":"text","text":" 的盒子就会建立 BFC。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b4/b463a771dab1cf4e3fe3f83f3beea41d.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里我们就很明显的可以看见一个变化，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text","attrs":{}}],"attrs":{}},{"type":"text","text":" 的元素整体作为一个 block level 的元素被排进了 BFC 里面。也就是说这个时候 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素的宽度整个围绕着 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"float-box","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素来进行排布了。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"http://tridiamond.tech/frontend-tutorials/css-tutorials/layouts/bfc-1.html","title":""},"content":[{"type":"text","text":"查看效果","attrs":{}}]},{"type":"text","text":" ｜ [查看代码](https://github.com/TriDiamond/frontend-tutorials/blob/master/css-tutorials/layouts/bfc-1.html) ｜ ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"喜欢的同学 🌟star 一下谢谢！","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"BFC 合并与边距折叠","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"刚刚我们讲到， BFC 只会发生在同一个 BFC 里面。如果创建了新的 BFC 的话，它就不会发生边距折叠。如果没有创建 BFC 的话，它就存在着一个同向边距折叠。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"好，同样我们用一段代码的实例来试验一下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n\n

\n

\n

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里的两个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素都给予了 100 x 100px 宽高，同时有一个 20px 的外边距。第二个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素我们用一个含有 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" 属性的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"div","attrs":{}}],"attrs":{}},{"type":"text","text":" 包着。首先我们默认给予这个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow: visible","attrs":{}}],"attrs":{}},{"type":"text","text":"，然后我们来看看会出现什么效果。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/23/2348631cebb031d1a07763df70949d67.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"出来的效果显而易见，我们可以看到上面和下面的两个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素的外边距发生了","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"边距折叠","attrs":{}}],"attrs":{}},{"type":"text","text":"现象。这里两个盒子就当做 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" 这个元素不存在一般，最后他们两个的距离就是 20px。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里做一个小实现，如果我们给 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素加入一个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin-top: 30px","attrs":{}}],"attrs":{}},{"type":"text","text":"，这个时候会对这两个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box","attrs":{}}],"attrs":{}},{"type":"text","text":" 的距离发生影响吗？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"答案是","attrs":{}},{"type":"text","text":"：会的！但是还是还是会出现 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"边距折叠","attrs":{}}],"attrs":{}},{"type":"text","text":" 的现象，只是它们之间的距离变成了 30px，但是并不会变成 20+30+20 这样的效果。我们来看看运行效果：","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n

","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/13/135ddfb43f14bef0df4bcde4b60978c2.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最后如果我们把 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow-box","attrs":{}}],"attrs":{}},{"type":"text","text":" 的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow","attrs":{}}],"attrs":{}},{"type":"text","text":" 属性改为 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"hidden","attrs":{}}],"attrs":{}},{"type":"text","text":"， 这个时候它就会创建 BFC。这时候我们就会发现，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"边距折叠","attrs":{}}],"attrs":{}},{"type":"text","text":" 现象就会消失，最终两个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素的距离就是 30+20 = 50px。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/97/973e116edde00f8d7b3c1a6fb3ed3377.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/50/50becc5e38fbc854c9dd7bb36e7815a7.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"\"不知道这里发生了什么，但是觉得很棒！哈哈\" ","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow-box","attrs":{}}],"attrs":{}},{"type":"text","text":" 里面的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素已经和外面的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box","attrs":{}}],"attrs":{}},{"type":"text","text":" 元素不在同一个 BFC 里面了。所以它们之间不会再发生边距折叠现象。但是 外面的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"overflow-box","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box","attrs":{}}],"attrs":{}},{"type":"text","text":" 是处于同一个 BFC 中，所以它们两个依然会发生边距折叠现象。所以这个就是创建 BFC 对边距折叠这个行为的影响。 ","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b3/b34c995f506fd74ab4d6e4adb20b4706.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我是来自《","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"技术银河","attrs":{}},{"type":"text","text":"》的","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"三钻","attrs":{}},{"type":"text","text":"：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"\"学习是为了成长，成长是为了不退步。坚持才能成功，失败只是因为没有坚持。同学们加油哦！下期见！\"","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/8a/8ae28301593f4c2e46b4e9b75a043721.gif","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"博主开始在B站每天直播学习，早上 06:00 点到晚上 11:30 。 欢迎过来《","attrs":{}},{"type":"link","attrs":{"href":"https://live.bilibili.com/22619211","title":""},"content":[{"type":"text","text":"直播间","attrs":{}}]},{"type":"text","text":"》一起学习。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们在这里互相监督，互相鼓励，互相努力走上人生学习之路，让学习改变我们生活！","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"学习的路上，很枯燥，很寂寞，但是希望这样可以给我们彼此带来多一点陪伴，多一点鼓励。我们一起加油吧！ (๑ •̀ㅂ•́)و","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"horizontalrule","attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/cd/cd310e0ebb99020b92a2d9b50a6cf0e5.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}