几种 CSS 布局
- Normal flow
- Flexbox
- Grid
- Floats
- Positioning
- Table layout
- Multiple-column layout
针对具体场景使用合适的布局方式
Each technique has its uses, advantages, and disadvantages, and no technique is designed to be used in isolation. By understanding what each method is designed for you will be in a good place to understand which is the best layout tool for each task.
Normal flow
正常布局流是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。
Normal flow is how the browser lays out HTML pages by default when you do nothing to control page layout.
Flexbox
Flexbox is the short name for the Flexible Box Layout Module, designed to make it easy for us to lay things out in one dimension — either as a row or as a column.
解决的问题：
- 在父内容里面垂直居中一个块内容。
- 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
- 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。
Flexbox
flex 布局
Solved by Flexbox
Grid
While flexbox is designed for one-dimensional layout, Grid Layout is designed for two dimensions — lining things up in rows and columns.
Grid 布局是最具实验性的 CSS 布局特性，它在浏览器中还没有得到广泛的支持。它的概念是通过定义一个网格来简化布局过程，然后定义内容的哪些部分位于网格的对应区域。
Floats
float 的主要用途是布置出多个列、浮动文字以环绕图片等
Floating an element changes the behavior of that element and the block level elements that follow it in normal flow. The element is moved to the left or right and removed from normal flow, and the surrounding content floats around the floated item.
Originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of Flexbox and Grid it has now returned to its original purpose, as this article explains.
Positioning
Positioning allows you to take elements out of the normal document layout flow, and make them behave differently,
四种定位类型：Static positioning、Relative positioning、Absolute positioning、Fixed positioning、 Sticky positioning。
Multiple-column layout
CSS 多列布局，可以更容易地定义多列文本。
The multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper.
Table layout
CSS 表格主要用于布局表单元素，但早期的 web 开发者也将其应用于网站的整体布局。
Table 布局能实现的场景 Flex 布局都能够实现，但在 IE8 和 IE9 的场景下还是有 Table 布局的使用场景的。
两种类型的表格布局
- HTML Table（
<table>标签） - CSS Table（
display: table等相关属性）