共计 795 个字符，预计需要花费 2 分钟才能阅读完成。
CSS 布局之左右布局与左中右布局
方法：为子元素设置浮动，然后在其父元素上使用 clearfix 类来清除浮动。代码示例：
html 部分：
<div class=”parent clearfix”>
<div class=”child”>a</div>
<div class=”child”>b</div>
<div class=”child”>c</div>
</div>
CSS 部分：
.child{
float: left;
}
.clearfix::after {
display: block;
content: ”;
clear: both;
}
水平居中
子元素为内联元素、单个块状及多级块状元素布局方案不同，具体总结如下：
内联元素：对父元素设置 text-align: center；
单个块状元素：对子元素设置 margin: 0 auto;
多个块状元素：有三种方式 a、子元素全部设置为 display: inline-block;，父元素设置为 text-align: center；b、flex 布局，父元素 display: flex; justify-content: center; c、如果是在多行各自居中，直接给子元素设置 margin: 0 auto;
垂直居中
子元素为单行内联、多行内联及块状元素布局方案不同，具体总结如下：
单行内联元素：父元素高度一定，设置 line-height 等于 height
多行内联元素：父元素设置：display: table-cell; vertical-align: middle;
块状元素：1、固定高度的块级元素：通过绝对定位元素距离顶部 50%，并设置 margin-top 为向上偏移元素高度的一半
2、未知高度的块级元素：借助 CSS3 中的 `transform` 属性向 Y 轴反向偏移 50% 的方法来实现
一些小技巧
合理使用伪元素
a 标签去掉其默认样式时，颜色可设置为继承父元素 a{color:inherit;}
合理使用 max-width 属性
