注：全文摘自MDN-介绍CSS布局
CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这个模块中将涉及更多关于页面布局技术的细节：
- 浮动
- 定位
- CSS 表格
- 弹性盒子
- 网格
每种技术都有它们的用途，各有优缺点。
正常布局流
正常布局流是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。让我们快速地看一个HTML的例子：
<p>I love my cat.</p>
<ul>
<li>Buy cat food</li>
<li>Exercise</li>
<li>Cheer up friend</li>
</ul>
<p>The end!</p>默认情况下，浏览器的显示如下:
注意，HTML元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。
布局技术会覆盖默认的布局行为：
position属性 — 正常布局流中，默认为static，使用其它值会引起元素不同的布局方式，例如将元素固定到浏览器视口的左上角。- 浮动——应用
float值，诸如left能够让块级元素互相并排成一行，而不是一个堆叠在另一个上面。 display属性——标准值block,inlineorinline-block会改变元素在正常布局流中的行为方式(见 Types of CSS boxes )，而一些不常见或特殊的值允许我们使用完全不同的方式进行布局，使用工具比如Flexbox。
浮动
浮动技术允许元素浮动到另外一个元素的左侧或右侧，而不是默认的一个堆叠另一个。float 的主要用途是布置出多个列并且浮动文字以环绕图片。下面我们快速浏览一下 float 属性并通过一个例子来说明。
float 属性有四个可能的值：
left— 将元素浮动到左侧。right— 将元素浮动到右侧。none— 默认值, 不浮动。- inherit — 继承父元素的浮动属性。
简单HTML示例
下面展示了如何用浮动来创建一个简单的两列布局。首先看一下HTML：
<h1>2 column layout example</h1>
<div>
<h2>First column</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
</div>
<div>
<h2>Second column</h2>
<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut.</p>
</div>代码中有一个一级标题和两个简单的 <div>元素。每个又各自包含一个二级标题和一个段落。默认情况下。HTML内容自上而下显示：
整列浮动
下面让我们将两个 <div>元素排成一行。下面的代码可以实现这个效果. 注意这两个 <div>一个浮动值为 left，另外一个浮动为 right。这意味着它们其中一个往左靠，另外一个往右靠。给这两个元素分别设置 width值，使得它们能够在同一行放下来，并且设置一个水平的间距(总宽度不要大于100!).
div:nth-of-type(1) {
width: 48%;
float: left;
}
div:nth-of-type(2) {
width: 48%;
float: right;
}修改过的代码如下：
定位技术
定位技术(position)允许我们将一个元素从它在页面的原始位置准确地移动到另外一个位置。
有四种主要的定位类型需要我们了解：
- 静态定位(Static positioning) 是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。
- 相对定位(Relative positioning) 允许我们相对元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计(design pinpointing)非常有用。
- 绝对定位(Absolute positioning) 将元素完全从页面的正常布局流中移出，类似将它单独放在一个图层中. 我们可以将元素相对于页面的
<html>元素边缘固定，或者相对于离元素最近的被定位的祖先元素(ancestor element)。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板. - 固定定位(Fixed positioning) 与绝对定位非常类似，除了它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。 在创建类似页面滚动总是处于页面上方的导航菜单时非常有用。
简单定位示例
我们将展示一些示例代码来熟悉这些布局技术. 这些示例代码都作用在相同的HTML上：
<h1>Positioning</h1>
<p>I am a basic block level element.</p>
<p class="positioned">I am a basic block level element.</p>
<p>I am a basic block level element.</p>该HTML将使用以下CSS默认样式：
body {
width: 500px;
margin: 0 auto;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}渲染效果如下:
相对定位
相对定位通常用来对布局进行微调，比如将一个图标往下调一点，以便放置文字. 我们可以通过下面的规则添加相对定位来实现效果:
.positioned {
position: relative;
background: yellow;
top: 30px;
left: 30px;
}这里我们给中间段落一个position``relative值——这属性本身不做任何事情，所以我们还添加了top和left属性。这些可以将受影响的元素向下向右移——这可能看起来和你所期待的相反，但你需要把它看成是左边和顶部的元素被“推开”一定距离，这就导致了它的向下向右移动。
添加此代码将给出以下结果：
绝对定位
绝对定位用于将元素移动到web页面的任何位置，以创建复杂的布局。有趣的是，它经常被用于与相对定位和浮动的协同工作。
回到我们最初的非定位示例，我们可以添加以下的CS