那里能够稍作改良，右侧栏间接设定 overflow:auto;zoom:1 或者许 overflow:hidden;zoom:1 的款式。使得多层嵌套的自顺应栅格化格局明晰明了。此外也会具有一些潜正在的危险：假如右侧栏蕴含少量剧本资源，能够会反应以至堵塞整个页面的载入（假如取舍运用 iframe或者许 ajax 来加载就另当别论）。
点此检查该代码示例：negative_margin_layout.html
</div>
<div class="aside">右侧栏</div>
</div>
</div>
<div class="left">左侧栏</div>
</div>
<div class="main">主体全体</div>
<div class="g2">
<div class="g1">
<div class="section">
<div class="wrap">
.aside{float:right;width:300px;position:relative;background:lime;}
.left{float:left;width:200px;position:relative;background:orange;}
.main{margin-left:210px;float:none;width:auto;position:static;overflow:auto;background:red;}
.g2{float:right;margin-left:-40em;width:100%;}
.g1{margin-right:310px;float:none;width:auto;position:static;}
.section{float:left;margin-right:-40em;width:100%;}
.wrap{}
思忖到页面构造的简单水平和容积大小，重型站点的格局计划，集体偏偏向于采纳诸如负边距等等自顺应格局。
点此检查该代码示例：two_column_layout.html
</div>
<div class="right">右侧栏</div>
<div class="left">左侧栏</div>
<div class="wrap">
.right{ display:table-cell;_display:block;zoom:1;background:lime;}
.left{float:left;background:orange;}
.wrap{background:gray;}
对准于这种场景，能够采纳两栏均浮动的办法。细致参考自顺应栅格化格局代码示例：grid_layout.html
3、自顺应栅格化格局
固然完成上要比其余计划更为简单，需求嵌套多层标签，正在定然水平上有失 HTML 文档的简明性。以Amazon首页来说，其自顺应格局采纳的是与Object-oriented CSS相相似的计划：
2、三栏自顺应格局
因为IE6并没有支撑 display:table-cell 属性，必需经过 CSS hack 来补偿某个缺点。假如使用到相似表格的页面排字，这种办法卓有成效。这种格局的益处正在于，没有管外框幅度如何变迁，主体全体总能自顺应。与其相比，正在全部页面格局中，提议运用 Object-oriented CSS 这种简明的、基于比重的栅格计划。眼前口碑网的前者格局零碎正是使用了这种处理计划，并有公用机器完成格局框架的主动化生成。正在这张运用 WebPageTest 对于 Amazon 首页渲染进程的某一时辰截图中，能够发觉内外两侧的形式首先予以出现，而主体全体会形成定然工夫的空白。
。那里以 YUI 框架需要的栅格计划为例来注明：
家喻户晓，HTML文档是次第解析的。但从页面构造下去说，节点情理次第和听觉论理次第没有分歧，最要害的主体全体形式被排正在整个文档的前面，主次散布没有正当，总感觉有一些可惜。那里就容易谈谈多少个本人碰到过的自顺应成绩。
点此检查该代码示例：three_column_layout.html
</div>
<div class="main">主体全体</div>
<div class="right">右侧栏</div>
<div class="left">左侧栏</div>
<div class="wrap">
.main{overflow:hidden;zoom:1;background:lime;}
.right{float:right;width:300px;background:orange;}
.left{float:left;width:250px;background:red;}
.wrap{background:gray;}
提到三栏自顺应格局，这该当是最为根本的主页排字方式了。
1、两栏自顺应格局
正在主页全部的格局上，需求采纳少量的自顺应，来满意没有同长短数据、形式的正当出现。完成原理能够参考《Creating Liquid Layouts with Negative Margins》这篇作品。其要害点是，内外两栏均没有定宽，右侧栏条款单位没有定。而眼前少量的网站正正在运用 950px/960px 幅度的栅格零碎，流动最小栅格单元的幅度，保障全体构造的正当、稳固和分歧。因而这种计划并没有宜用来整站页面框架的搭建。应用负边距能够建立出很多简单的流体格局方式。参考 Object-oriented CSS 中使用到的格局计划，则需求沿用两层标签完成，两栏中一栏浮动，另一栏幅度自顺应：
正在实践名目中，往往遇到如白色线框全体的两栏自顺应成绩。但一度主要的益处是，其各个区块（左侧栏、主体全体、右侧栏）文档构造次第能够随便互换，而正在听觉出现上却没有任何差别。
本案例中，内外侧栏辨别浮动，主体全体（两头栏）溢出躲藏。以此保障页面没有至于由于形式过多等缘由，招致堆叠、溢出、撑开等毁坏全体听觉成效的状况。假如能够保障外部一切区块自顺应，就只要要对于最外围器皿设定幅度，显示更为灵敏(义务编者：帝位库)
Object-oriented CSS 提出了一种构造化的多栏自顺应格局，应用栅格掌握器皿幅度，形式掌握器皿高低。