CSS布局工具箱的策略（Head First CSS学习笔记）

本文记录总结四种布局方式，主要作用在于实现两栏/三栏并列布局，以及处理布局和上下文的关系，参考书籍《Head First HTML与CSS 第2版》第十一章 布局与定位。本章节从浮动布局讲起，逐渐优化和解决之前布局存在的问题，适合初学者对布局进行学习和理解。

- 浮动布局

将侧边栏浮动到页面一侧，规定宽度，使其余部分围绕这个元素布局。通过设置并排元素的外边距margin可以使元素完全并排。通过设置clear使得确保这个浮动侧边栏不会与页脚重叠。

• 优点：可以通过clear避免与页脚重叠

• 缺点：需要把浮动的元素移到页面主内容智商，违背页面中内容的相对重要性，移动端不友好；无法创建两个高度相同的列

  <div id="header">...</div>
  <div id="sidebar">...</div>
  <div id="main">...</div>
  <div id="footer">...</div>
  

  #sidebar {
      margin:0px 10px 10px 10px;
      width: 280px;
      float:right;
  }
  #main {
      margin:0px 330px 10px 10px;
  }
  #footer {
      clear:right;
  }
  

- 凝胶布局

由一个固定大小的元素（<div>）包围页面中的所有内容，创建了冻结布局。然后利用auto属性值允许外边距扩展，把它调整为一种凝胶布局。

• 优点：布局固定，页面漂亮；解决了内容顺序问题

• 缺点：内容不会扩展来填满整个浏览器

  （示例主内容浮动，侧边栏扩展，是浮动布局的另一种形式的优化，在保障内容顺序的情况下优化布局）

  <div id="allcontent">
  	<div id="header">...</div>
  	<div id="main">...</div>
  	<div id="sidebar">...</div>
  	<div id="footer">...</div>
  </div>
  

  #allcontent {
      width:800px;
      margin-left:auto;
      margin-right:auto;
  }
  #sidebar {
      margin: 0px 10px 10px 450px;
  }
  #main {
      margin: 0px 10px 10px 10px;
      float: left;
      width: 400px;
  }
  #footer {
      clear:left;
  }
  

- 绝对布局

将侧边栏设置为一个特定的宽度，并将它定位在主内容右边。

• 优点：主内容可以随意扩展和收缩，侧边栏固定；适合精准地定位某个元素的位置
• 缺点：无法使用clear，浏览器变宽时，侧边栏会覆盖页脚

<div id="header">...</div>
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>

#sidebar {
   position:absolute;
   top:128px;
   right:0px;
   width:280px;
   margin:0px 10px 10px 10px;
}
#main {
   margin:0px 330px 10px 10px;
}

- 表格显示布局

通过设置html元素的结构，利用css将元素呈现为表格的形式。

• 优点：完美对齐的两列；随浏览器窗口顺滑扩展和收缩；
• 缺点：为页面增加的结构完全是为了支持布局，并没有实际意义

<div class="tableContainer">
    <div class="tableRow">
        <div id="main">...</div>
        <div id="sidebar">...</div>
    </div>
</div>

div.tableContainer {
     display: table;
     border-spacing: 10px;
}
div.tableRow {
     display: table-row;
}
#main {
   display: table-cell;
   vertical-align: top;
}
#sidebar {
   display: table-cell;
   vertical-align: top;
}