特点

浮动的特点，可以用八个字总结：脱标、贴边、字围和收缩。

为了更好说明，请看下图： 当框 1 向左浮动时，它脱离文档流（脱标）并且向左移动（贴边），直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果框 2 中有文字，就会围着框 1 排开（字围）。

如果把所有三个框都向左浮动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

单列布局

两列自适应布局

两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式

三栏布局

中间列自适应宽度，旁边两侧固定宽度

缺点

• center 部分的最小宽度不能小于 left 部分的宽度，否则会 left 部分掉到下一行
• 如果其中一列内容高度拉长，其他两列的背景并不会自动填充。

等高布局

等高布局是指子元素在父元素中高度相等的布局方式

什么是BFC

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。Block formatting context直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。通俗地讲，BFC是一个容器，用于管理块级元素。

定位(absolute) + 负margin

.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}