# 布局

为了方便记忆，笔者按照属性聚合度将跟布局有关系的属性分类，并划分为以下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