CSS之浮动/BFC/清除浮动（十二）

该文先讲解了CSS布局的几种策略，以及正常布局流是什么，然后逐步讲解浮动的由来，本质，如何产生，以及特性，随后讲解BFC规范，如何创建BFC，BFC的作用，最后列出清除浮动的几种方法。

1，实现 CSS 布局的几种策略

网页布局的本质是：用 CSS 来摆放盒子，把 盒子摆放到页面对应的位置，CSS 中提供了以下几种不同的 CSS 布局策略，来实现页面的布局：

• 正常布局流
• 浮动布局
• 定位布局
• 表格布局 （display: table;）
• 响应式设计
• 弹性布局
• 网格布局
• 多列布局
   

以上每种布局方式，都有自己的用途，也有各自己的优缺点，相互辅助。

2，正常布局流（Normal Flow)

正常布局流 (normal flow) 是指：

• 在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。
• 正常布局流就是规定了，在默认情况下块级元素和内联元素的排版方式。

2.1，正常布局流中，块级元素的排列方式

块级盒子会从包含块的顶部开始，按序垂直排列；
 
同级盒子间的垂直距离会由“margin”属性决定；
 
相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则。

2.2，正常布局流中， 内联元素排版方式

盒子会从包含块的顶部开始，按序水平排列；
 
只有水平外边距（垂直方向无效）、边框和内边距会被保留；
 
这些盒子可以以不同的方式在垂直方向对齐：可以底部对齐或顶部对其，或者按文字底部进行对齐。

深入 CSS 布局的不同方式，点击查看详细内容 👆(opens new window)