.layout:after { clear content display .layout__aside, .layout__main { float .layout { padding-left .layout__main { width .layout__aside { width .layout__aside--first { margin-left .layout__aside--second { margin-left

效果是：

5）布局五：3栏布局，2个侧边栏同时固定在右边，左边是主体内容栏：

主内容栏宽度自适应第1个侧边栏宽度固定第2个侧边栏宽度固定

.layout:after { clear content display .layout { padding-right .layout__main { width float .layout__aside { width float .layout__aside--first { margin-right .layout__aside--second { margin-right

效果是：

PS：

1）本文提供的这个布局方法，比网上看到的更加简洁一些，主要是因为不考虑兼容IE8及以下，不考虑把layout__main这个元素放在最前面，虽然经典的做法都要求把layout__main做法放在前面，这样可以让网页主体内容优先渲染，我认为这种考虑是完全多余的，2个元素的渲染顺序不同，实际上的用户体验差别又有多大呢，为了一个肉眼看不到的差异，而采用更复杂的做法，不值得；

2）css布局类的命名采用了BEM的命名规则，这个可以帮助你写出结构化，规范化的css，有兴趣的可以去了解：

3）在使用以上方法时，需注意html结构中layout__main与layout__aside的顺序；

3. 圣杯布局传统实现方法的一种变体

第2部分介绍的方法，使用诀窍是:

1）layout元素根据分栏布局的要求设置合适的padding，比如布局一，需配置padding-left；

2）layout__main和layout__aside元素都需要浮动，layout__main需配置float: left；layout__aside需根据分栏布局要求配置合适的float值，比如布局一，需配置为float: left；而布局二需配置float: right；

3）layout__main和layout__aside的顺序也很关键，具体内容可对比前面五种布局的html；

4）layout__aside需根据分栏布局要求，配置合适的margin-left或margin-right，比如布局一，需配置margin-left；布局二需配置margin-right。

虽然我不喜欢一定要坚持把layout__main放在前面，但是从第2部分这种方法的思路，衍生出的另外一种方法，却不得不要求始终把layout__main放在最前面，这种变体做法，也被称之为双飞翼布局。下面来看看双飞翼布局的实现方法（考虑到篇幅问题，本处仅提供布局三的代码，要想了解五种布局的详细方法，可以通过在第2部分提供的下载链接下载源码去了解，本部分的布局方法在代码中对应wing_layout{1,5}.html）

1）布局三：3栏布局，2个侧边栏分别固定在左边和右边，中间是主体内容栏：

主内容栏宽度自适应左侧边栏宽度固定右侧边栏宽度固定底部

.clear { clear .layout__main-wrapper,.layout__aside { float .layout__main-wrapper { width .layout__main { margin .layout__aside { width .layout__aside--left { margin-left .layout__aside--right { margin-left

这段代码的效果与第2部分布局三的效果一样，这种布局的诀窍是：

1）可以没有layout这一层包裹元素；

2）浮动清除需在外部元素上处理；

3）float和margin属性的设置方向相对统一，基本都是一个方向即可；

4）布局四和布局五实现起来，双飞翼布局还需要借助position:relative才行，相对要复杂一点。

4. 圣杯布局的纯浮动实现

前面两种方法都有2个共同点：

1）layout__main或layout__main-wrapper和layout__aside都会同时浮动；

2）都得借助负值属性实现。

其实还存在一种更加简洁的做法，不需要浮动layout__main或layout__main-wrapper，也不需要借助负值属性，只要浮动layout__aside，给layout__main加上合适的margin值，就可以利用浮动元素的特性，完成想要的分栏布局效果。还是以布局三为例，说明这种方式，其它方式可以从源码中查看，对应的是float_layout{1,5}.html：

左侧边栏宽度固定右侧边栏宽度固定主内容栏宽度自适应底部

.clear { clear .layout__main { margin .layout__aside--left { width float .layout__aside--right { width float

这段代码的效果与第2部分布局三的效果一样，这种方法的特点是：

1）清除浮动需借助外部元素；

2）layout__main上面不能使用clear属性。

5. 圣杯布局的flex实现

flex布局是一种新的网页布局方式，目前的兼容性如下：