# 布局
为了方便记忆，笔者按照属性聚合度将跟布局有关系的属性分类，并划分为以下8种基本布局
- 普通布局：
display:block/inline - 浮动布局：
float:left/right - 定位布局：
position:relative/absolute/fixed、left/right/top/bottom/z-index - 表格布局：
table系列属性 - 弹性布局：
display:flex/inline-flex、flex系列属性 - 多列布局：
column系列属性 - 格栅布局：
display:grid/inline-grid、grid系列属性 - 响应式布局：
em/rem/vw/vh/vmin/vmax、媒体查询
众多跟布局有关的属性，到底要如何结合才能完成想要的布局，具体开发中使用何种属性更为合适，这些都是布局方式中必须得面对的问题。本章也着重从常用的布局技巧说起，怎么样的属性搭配才能玩转网页排版。
在8种基本布局中，笔者还是比较推荐浮动布局、定位布局和弹性布局，熟悉这三种布局基本上能解决大部分网页排版问题。表格布局尽量不要使用，在第3章回流重绘有提及，可能很小的一个改动就会造成整个<table>回流；格栅布局其实是一个很不错的布局方式，无奈兼容性不是很好，所以笔者比较少研究，后续兼容性上来了笔者会更新本章格栅布局相关内容
弹性布局是一个好东西，完全掌握后能创造出很多意想不到的事情
清除浮动
在各种经典布局方式中，可能会结合浮动布局相关属性。在第4章盒模型有提及，使用
float会使节点脱流导致父节点高度坍塌，若不对父节点显式声明高度则很有必要给父节点清除浮动。定义以下clearfix用于清除浮动，给父节点添加即可。值得注意，clearfix已占用::after，所以使用clearfix的父节点就不能再声明::after了，可改用::before
.clearfix::after {
display: block;
visibility: hidden;
clear: both;
height: 0;
font-size: 0;
content: "";
}
@前端进阶之旅: 代码已经复制到剪贴板
笔者就不详细讲解清除浮动的原理和分析了，有兴趣的同学请查看Clearfix
# 全屏布局
经典的全屏布局由顶部、底部、主体三部分组成，其特点为三部分左右满屏拉伸、顶部底部高度固定和主体高度自适应，主要应用在主体布局。该布局很常见，也是大部分Web应用主体的主流布局。通常使用
<header>、<footer>和<main>三个标签语义化排版，<main>内还可插入<aside>作为侧栏。
<div class="fullscreen-layout">
<header></header>
<main></main>
<footer></footer>
</div>
@前端进阶之旅: 代码已经复制到剪贴板
position + left/right/top/bottom
- 顶部、底部和主体声明
left:0和right:0将其左右部分满屏拉伸；顶部和底部声明top:0和bottom:0分别将其吸顶和吸底，并声明俩高度为固定值；将主体的top和bottom分别声明为顶部高度和底部高度。 - 移动端基本都是以该布局为主，不信打开你常用的App瞧瞧。实现起来比较简单，基于其左右满屏拉伸这个特点下手即可。
.fullscreen-layout {
position: relative;
width
