前端主流排版有哪些？
正常流排版
1、盒子模型
IE盒模型（border-box）
IE 盒模型：属性 width，height 包含 content、border 和 padding，指的是 content + padding + border 。
W3C标准盒模型（content-box）
W3C 标准盒模型：属性 width ，height 只包含内容 content，不包含 border 和 padding 。
"box-sizing" 属性
-
content-box (默认)：指定的宽度/高度仅包括元素内部的内容。
-
border-box ：指定的宽度/高度包括元的内容、内边距和边框。
2、文字模型
"line-height" 属性
- line-height ：用于调整行高，因为font-size调整的字体大小并不随着行高改变，这一属性通常表现为行间距。
"vertical-align" 属性
"line-height" 属性
- 行盒：在其内部生成行内级格式化上下文
- 为行内级排版单元创建块级容器的行为，有一个专门的称呼，叫做Blockify
中英文换行区别
控制换行：'white-space'
Unicode中的连字符 - 软连字符（推荐）
css中的'hyphens'属性 - auto（推荐）
'word-break'有三种取值
3、BFC
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
1、浮动
2、绝对定位
3、containing block - 包含块的概念
某个盒的包含块，是逐级向上查找其父元素，直到某个父元素的position属性不是static为止，如果所有的祖先元素都是static，那么包含块就是文档根元素。
4、如何创建一个BFC
- 浮动元素（元素的float不是 none，指定float为left或者right就可以创建BFC）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- display:inline-block，display:table-cell，display:flex，display:inline-flex
- overflow指定除了visible的值
5、BFC有什么特点
- 在BFC中，块级元素从顶端开始垂直地一个接一个的排列。（当然了，即便不在BFC里块级元素也会垂直排列）
- 如果两个块级元素属于同一个BFC，它们的上下margin会重叠（或者说折叠），以较大的为准。但是如果两个块级元素分别在不同的BFC中，它们的上下边距就不会重叠了，而是两者之和。
- BFC的区域不会与浮动的元素区域重叠，也就是说不会与浮动盒子产生交集，而是紧贴浮动边缘。
- 计算BFC的高度时，浮动元素也参与计算。BFC可以包含浮动元素。（利用这个特性可以清除浮动）
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
6、BFC有什么用
- 解决外边距重叠问题
- 制作两栏布局: BFC的区域不会与浮动的元素区域重叠
- 清除元素内部的浮动
