ch8 基于浮动的布局（两列浮动布局、三列浮动布局）

CSS布局技术的根本是3个基本概念：定位、浮动、外边距操纵。

只需要设置希望定位的元素的宽度，然后将它们向左或向右浮动。因为浮动的元素不再占据文档流中的任何空间，它们就不再对包围他们的块框产生任何影响，为解决这个问题:

1. 需要对布局中各个点上的浮动元素进行清理，常见的做法不是连续的浮动和清理元素，而是浮动几乎所有东西，然后在整个文档的“战略点”（比如页脚）上进行一次或者两次清理；
2. 还可以使用溢出方法清理某些元素的内容。

1.两列的浮动布局

<div class="wrapper">
  <div class="content">
      <div class="primary">     </div>
      <div class="secondary">   </div>
  </div>
  <div class="footer"> </div>
</div>

 

一般来说，将两列都向左浮动，然后使用外边距或内边距在两列之间创建一个隔离带，使用这种方法，列在可用空间被包的很紧，没有喘息的空间，若浏览器表现良好则没有问题，但是差劲的浏览器会打乱紧密的布局，迫使一列退到另一列的下面，例如在IE上，IE考虑元素内容的尺寸，而不是元素本身的尺寸，标准的浏览器中，如果内容太大（可能只是把文本设置为斜体），它只会超出框之外，而IE中整个元素都会扩展，这样的话在紧密的布局中，没有足够的空间可以让元素并排出现，就会有一个浮动元素退到下面去。
解决方法：不使用水平外边距或内边距来建立隔离带，而是让一个元素向左浮动，让另一个向右浮动，从而创建视觉上的隔离，如果一个元素的尺寸增加了，它不会立刻占满水平空间并下降，而只是扩展到视觉隔离带中：

代码实现：

.wrapper{
    width:920px;
}
.content .primary{
    width : 650px;
    padding-right : 20px;// 设置内边距，避免其包含的文本紧挨着元素的右边缘
    float:right;
    display:inline;//用来防止IE中双外边距浮动产生的bug
}
.content .secondary{
    width:230px;
    float:left;
    display:inline;//用来防止IE中双外边距浮动产生的bug
}
.content{
    overflow:hidden;//上述元素是浮动的，不占据文档流的空间，造成页脚上升，则需要对父元素content应用溢出方法来清理浮动元素
}

 

总宽度是920px，代码的结果是在浮动元素之间有20px的隔离带，用来防止内容扩展导致浮动元素下降。

2.三列的浮动布局

<div class="content">
    <div class="primary">
        <div class="primary">     </div>
        <div class="secondary">   </div>
    </div>
    <div class="secondary"> </div>
</div>

 

方法：其实就是将主内容区域分为两列，从而形成三列的效果。将次要内容向左浮动，主内容区向右浮动，再在主内容div中，将次要div向右浮动。

.content .primary{
    width : 670px;
    float:right;
    display:inline;         //用来防止IE中双外边距浮动产生的bug
}
.content .secondary{
    width:230px;
    float:left;
    display:inline;      //用来防止IE中双外边距浮动产生的bug
}
.content .primary .primary{
    width:400px;
    float:left;
    display:inline;
}
.comtent .primary .secondary{
    width:230px;
    padding-right:20px;       //设置内边距，避免其包含的文本紧挨着元素的右边缘
    float:right;
    display:inline;
}