CSS Layout

几种 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


Normal flow is how the browser lays out HTML pages by default when you do nothing to control page layout.

Normal Flow


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.


  • 在父内容里面垂直居中一个块内容。
  • 使容器的所有子项占用等量的可用宽度/高度,而不管有多少宽度/高度可用。
  • 使多列布局中的所有列采用相同的高度,即使它们包含的内容量不同。

flex 布局
Solved by Flexbox


While flexbox is designed for one-dimensional layout, Grid Layout is designed for two dimensions — lining things up in rows and columns.

Grid 布局是最具实验性的 CSS 布局特性,它在浏览器中还没有得到广泛的支持。它的概念是通过定义一个网格来简化布局过程,然后定义内容的哪些部分位于网格的对应区域。

A Complete Guide to Grid


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 allows you to take elements out of the normal document layout flow, and make them behave differently,

四种定位类型:Static positioningRelative positioningAbsolute positioningFixed positioningSticky 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.

Using multi-column layouts

Table layout

CSS 表格主要用于布局表单元素,但早期的 web 开发者也将其应用于网站的整体布局。
Table 布局能实现的场景 Flex 布局都能够实现,但在 IE8 和 IE9 的场景下还是有 Table 布局的使用场景的。


  • HTML Table(<table>标签)
  • CSS Table(display: table等相关属性)

css Table布局



In Search of the Holy Grail


Introduction to CSS layout