高度与文档流

一、div高度是由什么决定的？

div高度由其内部文档流元素的高度总和决定。

二、文档流是什么？

文档流：文档流元素的流动方向。

• 内联元素：从左往右流动，如果宽度不够遇到阻碍，则换行继续流，（如果换行中一个元素中是很长的中文则会被分开，如果是英文单词，则不会被分开，如果想让英文被分开，则设置属性：word-break:break-all）；

• 块级元素：从上往下流动，每个块级元素另起一行。
  （如果想让多个块级元素在一起，可以增加浮动效果）。
  div的宽度width最高为100px。

三、内联元素span的高度是由什么决定的？

内联元素的高度是不可测的，当字体比较小的时候，可以用line-hight来控制行高。

• 如果span里面只有一个字，span的行高由什么决定？
  由字的建议行高总和其他与字体相关的使用来确定，这个值由设计师决定，前端无法确定。
• 如果有多个span，那么div的行高由什么来决定？
  哪个span最高，则div的高度则由那个行高最高的span来决定。
  例如一个span的高度为140px，另一个span的高度为121px，那么div的高度则为140px。