浮动
设计初衷
浮动能将一个元素拉到容器的一侧，这样文档流就能包围它。
双容器模式
用于将内容居中。通过将内容放在两个嵌套的容器中，然后给内层的容器设置外边距，让它在外层容器中居中。
.container{
max-width:;
margin:0 auto;
}
设置max-width可以有效避免小屏幕上出现水平滚动条。
容器折叠
浮动元素不同于普通文档流的元素，它的高度不会追加到父元素上。
清除浮动
浮动是为了围绕。
清除浮动是为了包裹。
方法一：clear
<main>
...
<div style="clear:both"></div>
</main>
clear:both声明让该元素移动到浮动元素的下面，而不是侧面。
因为空div本身没有浮动，所以容器就会扩展，直到包含它，也会包含它上面的浮动元素。
方法二：::after
::after可以快速地在DOM中在容器末尾添加一个元素，而不用在HTML中添加标记。
.clearfix::after{
display:block;
content:" ";
clear:both;
}
将伪元素的display设置为非inline
要给包含浮动的元素清除浮动而不是浮动元素本身。
改进：防止伪元素的外边距折叠
.clearfix::before,
.clearfix::after{
display:table;
content:" ";
}
.clearfix::after{
clear:both;
}
为什么display:table有效？
创建一个display:table元素，也就在元素内隐式地创建了一个表格行和一个单元格，外边距无法通过单元格元素折叠。
看起来display:table-cell会生效，但是clear只对块级元素生效，而表格是块级元素，单元格不是。
“出乎意料”的浮动陷阱
浏览器会尽可能地将浮动元素放在靠上的地方。
问题修复：清除第三个浮动元素上方的浮动。
更通用的做法：清除每行的第一个元素上方的浮动。
每行两个
.media:nth-child(odd){
clear:left;
}
每行m个
.media:nth-child(mn+1){
clear:left;
}
媒体对象布局和BFC
图片在一侧，文字在另一侧，这种布局被称为”媒体对象“。
BFC：块级格式上下文，block formatting context。
BFC是网页的一块区域，元素基于这块区域布局。
虽然BFC本身是环绕文档流的一部分，但它将内部的内容与外部的上下文隔离开，这种隔离为创建BFC的元素做了以下3种事：
- 包含了内部所有元素的上下外边距，它们不会跟BFC外面的元素产生外边距折叠。
- 包含了内部所有的浮动元素。
- 不会跟BFC外面的浮动元素重叠。
给元素添加以下的任意属性值都能创建BFC：
- float：left或right。
- overflow：hidden、auto或scroll。
- display：inline-block、table-cell、table-caption、flex、inline-flex、grid或inline-grid。
- position：absolute或fixed。
网页的根元素也创建了一个顶级的BFC。
网格系统
设计思想：在一个行容器种放置一个或多个列容器。
作用：提高CSS代码的可复用性。
很多CSS框架包含了自己的网格系统。
CSS框架：一个预编译的CSS代码库，常见如Bootstrap、Foundation和Pure。
<div class="row">
<div class="column-4"></div>
<div class="column-8"></div>
</div>
网格系统行样式：
.row::after{
content:" ";
display:block;
clear:both;
}
这样写避免了给每一个行元素添加clearfix类。
网格系统列样式：
[class*="column-"]{
float:left;
}
.column-1 { width: 8.3333%; }
.column-2 { width: 16.6667%; }
.column-3 { width: 25%; }
.column-4 { width: 33.3333%; }
.column-5 { width: 41.6667%; }
.column-6 { width: 50%; }
.column-7 { width: 58.3333%; }
.column-8 { width: 66.6667%; }
.column-9 { width: 75%; }
.column-10 { width: 83.3333%; }
.column-11 { width: 91.6667% }
.column-12 { width: 100%; }
Flexbox
Flexbox简介
弹性盒子布局，Flexible Box Layout。
给元素添加display:flex，该元素变成了一个弹性容器(flex container)，它的直接子元素变成了弹性子元素(flex item)。
弹性子元素是在同一行按照从左到右的顺序并排排列。
弹性容器像块元素一样填满可用宽度，但是弹性子元素不一定填满其弹性容器的宽度。
弹性子元素高度相等，该高度由它们的内容决定。
弹性子元素的大小
flex属性是三个不同大小属性的简写：flex-frow、flex-shrink和flex-basis。
flex-basis定义了元素大小的基准值，即一个初始的主尺寸。它的初始值为auto。
如果flex-basis不为初始值，则width属性被忽略。
容器剩余宽度按照flex-grow(增长因子)的值分配给每个弹性子元素。flex-grow的值越大，分配的宽度越多。
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
flex-shrink 属性只能是一个 <number>。
例如A元素flex-shrink为1，B元素flex-shrink为2，溢出宽度为120px,则A收缩40px，B收缩80px。
弹性方向
flex-direction默认值row，控制子元素从左到右排列；flex-direction:column控制子元素从上到下排列。
row-reverse能让元素从右到左排列，当然还有column-reverse。
弹性容器的属性
1.flex-wrap
允许弹性子元素换到新的一行或多行显示。
可设置为nowrap(初始值)、wrap或wrap-reverse。
启用换行后，子元素不再根据flex-shrink收缩。
2.flex-flow
是flex-direction和flex-wrap的简写。
3.justify-content
当子元素未填满容器时，justify-content控制子元素沿主轴方向的间距。
- 默认值
flex-start：让子元素从主轴的开始位置顺序排列。 flex-end：子元素从主轴的结束位置开始排列。center：子元素居中。space-between：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。space-around：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
4.align-item
控制子元素在副轴上的对齐方式。
- 默认值
stretch：弹性项包含外边距的交叉轴尺寸被拉升至行高。 - flex-start和flex-end
- center
- baseline：元素根据第一行文字的基线对齐。
5.align-content
如果开启了换行，align-content属性就能控制弹性容器内沿副轴方向每一行的间距。
- flex-start
- flex-end
- center
- stratch(初始值)
- space-between
- space-around
弹性子元素的属性
1.align-self
该属性控制弹性子元素沿着容器副轴方向的对齐方式。它跟弹性容器的 align-items 属性效果相同，但是它能单独给弹性子元素设定不同的对齐方式。auto 为初始值，会以容器的 align-items 值为准。其他值会覆盖容器的设置
2.order
正常情况下，弹性子元素按照在 HTML 源码中出现的顺序排列。它们沿着主轴方向，从主轴的起点开始排列。使用 order 属性能改变子元素排列的顺序。还可以将其指定为任意正负整数。如果多个弹性子元素有一样的值，它们就会按照源码顺序出现。
初始状态下，所有的弹性子元素的 order 都为 0。指定一个元素的值为−1，它会移动到列表的最前面；指定为 1，则会移动到最后。可以按照需要给每个子元素指定 order 以便重新编排它们。这些值不一定要连续。
Flexbugs
https://github.com/philipwalton/flexbugs
整页布局
Flexbox基于弹性子元素的数量和其中的内容量（及大小）来计算容器的大小。因为如果网页很大，或者加载很慢时可能会产生奇怪的行为。
当浏览器加载内容时，它渐进渲染到了屏幕，即使此时网页的剩余内容还在加载。
Jake Archibald给出的一个建议是对整页布局的时候使用网格布局