CSS 布局主要有两种方式：
- 传统布局方式：基于盒模型，依赖 display、position、float 属性。
- 现代布局方式：Flex 布局和 Grid 布局。
本文主要讲解传统的布局方式，直接分析常用的属性。
希望你已经掌握 CSS 基础知识，也了解文档流、盒模型这些核心概念。
直接开始吧！
1. box-sizing 属性
box-sizing属性规定了盒模型宽高的计算方式。
content-box
默认值，即标准盒模型，元素的 width/height 值等于内容的宽高。
border-box
表示 IE 盒模型，元素的 width/height 值等于内容的宽高+boder+padding。
box-sizing是比较新的属性，需要添加-webkit- 和 -moz- 前缀。支持IE8+。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
2. display 属性
display属性有两个作用：①定义元素的类型。②控制其子元素的的布局。
display 属性是 CSS 布局中的核心，对于不同元素，它的默认值有时是不一样。
none
display: none表示在不删除元素的情况下，隐藏元素，并且不会占据原来的空间。
和visibility: hidden不一样，它占据原来的空间。
一些特殊元素，默认的 display 值是它，例如<script></script> 。
block
表示块级元素，比如<div></div>。
inline
表示行内元素，比如<span></span>。
inline-block
表示行内块级元素，元素兼具 block 和 inline 的特点。
flex
表示采用 Flex 布局的元素。
Flex 是 Flexible Box 的缩写，意为「弹性布局」，任何一个元素都可以指定为 Flex 布局。
Flex 布局的相关属性可以分成两拨，一波作用在父元素（Flex 容器），一波作用在子元素（Flex 子项）。
| 父元素 | 子元素 |
|---|---|
flex-direction |
order |
flex-wrap |
flex-grow |
flex-flow |
flex-shrink |
justify-content |
flex-basis |
align-items |
flex |
align-content |
align-self |
了解更多 Flex 布局，点击链接。
grid
表示采用 Grid 网格布局的元素。
网格布局和 Flex 布局有一定相似，但也存在重大区别。
了解更多网格布局，点击链接。
另外 display 属性的取值，远不止这些，这里总结常用的取值。
3. position 属性
position属性规定元素的定位方式。
元素设置了position 属性，常常和 top/right/bottom/left 属性一起使用。
static
默认值，表示元素自然放在文档流中，没有特殊的地方。
具体表现为 top/right/bottom/left 属性对元素无效。
相反的，当position属性值不是static时，那么就称元素为 positioned 元素，也可以理解为元素被 positioned。
除了static，positon属性值还有以下几种：
relative
表示相对定位元素。
通过设置 top/right/bottom/left 属性，元素会偏离原来的位置，但不会影响到其他元素。
通过一个简单的例子，你就明白了。
图中三个 div 色块原本正常摆放，现在对绿色 div 添加以下属性。
.div2 {
position: relative;
top: 20px;
left: 20px;
}
可以发现，绿色 div 偏离了原来的位置，而它周围的元素没有变化。
absolute & fixed
absolute 和 fixed 放在一起理解，都表示绝对定位元素。
绝对定位元素会脱离文档流，原来的位置会空出来，给其他元素。
其中，fixed相对浏览器窗口固定，不管页面怎么滑动，位置都不会变。
请看下面的例子。
绿色色块添加了以下属性。
.green {
position: fixed;
top: 20px;
left: 20px;
}
需要注意，移动端对 fixed 的支持很差，请尽量避免。这里有相应的案例。
absolute稍稍棘手一些，它相对于最近的 positioned 父元素固定，也就是说，会随页面滚动。
如果没有找到 positioned 父元素，就相对于 body 元素。
请看下面的例子。
父元素下有两个子元素，原本规规矩矩排列着。
现在我们将父元素设置成 positioned 元素，就 relative 吧！
然后给绿色的子元素添加以下属性。
.green {
position: absolute;
bottom: 20px;
right: 20px;
}
可以看到，绿色出轨了，它相对于父元素右边和底部的距离是 20px。
同时，原来的位置被红色元素占领了。
sticky
sticky 表示「粘性」，是 relative和 fixed 的结合。
最初，元素表现为 relative，相对于原来的位置进行偏移；滚动出屏幕后，由表现为 fixed 定位，相对于浏览器定位。
不过，IE 浏览器不支持，而且 Chrome 曾经也放弃过。
4. float 属性
表示浮动属性，设计初衷是为了实现文字环绕。
但我不建议你这么理解，这是为了和前面的 absolute 或 fixed 作区分。
因为，在文字环绕图片的例子中，虽然图片设置了左浮动，但文字还是绕着图片走，说明浮动元素还以某种方式影响着原来的布局。
left & right
left 和 right 类似，下面就以 left 为例。
请看下面的例子。
图中父元素高度自适应，三个子元素把父元素给撑开了。
现在，给三个子元素添加float: left属性后，父元素的高度消失了。
这也是浮动元素带来的一个影响，会使父元素高度塌陷。
这个很好理解，子元素都浮起来了，没有东西把父元素撑开，自然就瘪了。
那么，怎么把父元素的高度变回来呢？
常见的做法有两种：
- 给父元素添加
overflow: hidden属性。 - 使用
clear: both属性。
clear 属性，即清除浮动。一般使用clear:both。
因为clear:left与clear:right都可以用clear:both实现。
上面的例子中，可以在子元素后面添加一个 div 元素，属性设置为style="clear: both"。
clear 属性还有一些重要的点，你可通过链接了解；本文主要讲 CSS 布局，就不展开讨论。
none
默认值，表示不浮动。
5. 其他
margin 属性
当块级元素设置了margin: 0 auto，该元素就实现水平方向居中。这种方式的兼容性是极好的。
不过，你需要为元素设置宽度，防止它撑满整个容器。
左右外边距为auto，迫使元素将剩余的宽度一分为二成为左右外边距。
需要注意，当浏览器窗口比元素的宽度还要窄时，浏览器会出现一个水平滚动条。
此时，可以用 max-width 替代 width。表示，元素宽度最大可以这么多了，但如果父元素不够的话，小点也没关系。
inline-block VS float
当我们要实现这样的水平列表时，有两种方式可以实现：
display: inline-blickfloat: left
先说结论，尽量使用inline-block，原因如下。
- float 有高度塌陷的问题，需要清除浮动。
- 当列表元素的有不同高度时，float 会出现几个元素挤在同一行，导致混乱。
使用 inline-block有一下注意事项。
-
同一行的 inline-block 元素，底部对齐，可以添加
vertical-align: top来改变。 -
需要对 IE6/7 做兼容处理：
zoom: 1。
5. 总结
最后，总结一下 CSS 布局相关概念。
| 概念 | 属性 |
|---|---|
| 盒模型 | box-sizing: border-box |
| 浮动 | flood: left | right |
| 相对定位 | position: relative |
| 绝对定位 | position: absolute | fixed |
| Flex 布局 | display: flex |
| 网格布局 | display: grid |
- 此外还有
display: table-cell，应用场景不多，就不展开了。
参考链接：
