# 布局

Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another.

布局的目的是把元素放到正确的位置。

# Introduction to CSS layout

This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different display values — and introduce some of the concepts we'll be covering throughout this module.

# Flexbox

Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals.

# Grids

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many feature that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout.

# Floats

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, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different position values, and how to use them.

# Multiple-column layout

The multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper. This article explains how to use this feature.

# Legacy layout methods

Grid systems are a very common feature used in CSS layouts, and before CSS Grid Layout they tended to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project.

# 布局相关属性

浮动 float clear 定位 position / top / right / bottom / left / z-index / clip(用于绝对定位元素) 列表 list系列 表格 table-layout / border-collapse / border-spacing / caption-side / empty-ceil 分列 column均为css3 显示类型 display / visibility 溢出模式 overflow

参考： https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction