介绍

参考：浮动、bfc-规范、清除浮动的最佳实践

# 浮动、BFC 规范、清除浮动的最佳实践

TIP

在讲 CSS 浮动之前，我们要现在了解下 CSS 布局有哪些实现机制

# 一、实现 CSS 布局的几种策略

网页布局的本质是：

用 CSS 来摆放盒子，把盒子摆放到页面对应的位置。在之前的章节我们已经详细介绍了盒子模型，那接下来我们就来学习，在 CSS 中提供了哪些摆放盒子的技术？

css 中提供了以下几种不同的 CSS 布局策略，来实现页面的布局。

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

以上每种布局方式，都有自己的用途，也有各自己的优缺点，相互辅助。 通过理解各个布局方法的设计理念，我们能够找到构建理想网页需要的布局方案。

# 二、正常布局流（Normal Flow)

正常布局流 (normal flow) 是指

• 在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。
• 我们都知道，HTML 元素有块级元素和内联元素。所以更简单直白的理解，正常布局流就是规定了，在默认情况下块级元素和内联元素的排版方式。

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

TIP

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

# 2、正常布局流中， 内联元素排版方式

TIP

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

相关元素总结，在博客中，点击查看