# 布局详解
CSS page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window.
The page layout techniques we'll be covering in more detail in this module are
- Normal flow
- The display property
- 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.
示例：
Note here how the HTML is displayed in the exact order in which it appears in the source code(元素的显示次序与在源码中的次序基本一致), with elements stacked up on top of one another — the first paragraph, followed by the unordered list, followed by the second paragraph.
The elements that appear one below the other are described as block elements, in contrast to inline elements, which appear one beside the other, like the individual words in a paragraph.
When you use CSS to create a layout, what you are doing is moving the elements away from this normal flow(当你创建布局时，往往就是把元素托出文档流的过程。), however for many of the elements on your page this normal flow will create exactly the layout you need. This is why starting with a well-structured HTML document is so important(创建一个结构良好的html非常重要), as you can then work with the way things are laid out by default rather than fighting against it.
The methods that can change how elements are laid out in CSS are as follows:
The display property — Standard values such as block, inline or inline-block can change how elements behave in normal flow (see Types of CSS boxes for more information). We then have entire layout methods that are switched on via a value of display, for example CSS Grid and Flexbox.
Floats(浮动) — Applying a float value such as left can cause block level elements to wrap alongside one side of an element, like the way images sometimes have text floating around them in magazine layouts.
The position property(定位属性) — Allows you to precisely control the placement of boxes inside other boxes. static positioning is the default in normal flow, but you can cause elements to be laid out differently using other values, for example always fixed to the top left of the browser viewport.
Table layout — features designed for styling the parts of an HTML table can be used on non-table elements using display: table and associated properties..
Multi-column layout — The Multi-column layout properties can cause the content of a block to layout in columns, as you might see in a newspaper.
# The display property
The main methods of achieving page layout in CSS are all values of the display property. This property allows us to change the default way something displays. Everything in normal flow has a value of display, used as the default way that elements they are set on behave. For example, the fact that paragraphs in English display one below the other is due to the fact that they are styled with display: block. If you create a link around some text inside a paragraph, that link remains inline with the rest of the text, and doesn’t break onto a new line. This is because the element is display: inline by default.
You can change this default display behaviour. For example, the
In addition to being able to change the default presentation by turning an item from block to inline and vice versa, there are some bigger layout methods that start out as a value of display. However when using these you will generally need to invoke additional properties. The two values most important for our purposes when discussing layout are display: flex and display: grid.