css 定位模型和浮动总结

对于css定位，今天总算是搞明白了，做一下小结。

css 中有3种基本的定位机制：普通流、浮动和绝对定位。说明：普通流中元素框的位置由元素在HTML中的位置决定，块级框从上到下一个接一个地垂直排列，框之间的垂直距离由框的垂直外边距计算出来。

（1）相对定位：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点移动。如果将top设置为20像素，那么框将出现在原位置顶部下20像素的地方。如果将left设置为20像素，那么会在元素左边创建20像素的空间，也就是将元素向右移动

#myBox{

  position:relative;

  left:20px;

  top:20px;

}

（2）绝对定位：相对定位实际上被看做普通流定位模型的一部分，因为元素的位置是相对于它在普通流中的位置的。与之相反，绝对定位使元素的位置与文档流无关，因此不占据空间。绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素确定的。如果元素没有已定位的祖先元素，那么它的定位是相对于初始包含块的。根据用户代理不同，初始包含块可能是画布或HTML元素。

      对于定位的的主要问题时要记住每种定位的意义，相对定位是“相对于”元素在文档流中的初始位置，而绝对定位是“相对于”距离它最近的已定位的祖先元素，如果不存在已定位的祖先元素，那么相对于初始包含块。(3)固定定位：固定定位是绝对定位的的一种。差异在于固定元素的包含块是视口（viewport）。这是我们能够创建总是出现在窗口中相同位置的浮动元素。不过IE6和更低版本不支持固定定位。IE7部分支持这个属性，但是实现中有许多Bug。

（4）浮动模型：浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘。因为浮动框不在文档的普通流中，所以文档的普通流中的块框表现的就像浮动框不存在一样。

行框和清理

         如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现得像浮动根本不存在一样，但是，框的文本内容会受浮动元素的影响。会移动以留出空间。要想阻止行框围绕在浮动框的外边，需要对包含这些框的元素应用clear属性。clear属性的值可以是left、right、both或none，它表示框的哪些边不应该挨着浮动框。

      我们来看更详细的看看浮动和清理。假设有一个图片，你希望它浮动到一个文本的左边。你想将这个图片和文本包含在另一个具有背景颜色和边框的元素中。你可能会编写下面这样的代码：

.news{

     background-color:gray;

    border:solid 1px black;

}

.new img{

   float:left;

}

.new p{

  float:right;

}

.clear {

  clear:both;

}

<div>

   <img src="/img/pic.jpg" alt="my pic"/>

  <p>some text</p>

 <br class="clear"/>

</div>

         但是，因为浮动元素脱离了文档流，所以包围图片和文本的div不占据空间。如何让包围元素在视觉上包围浮动的元素呢？

方法一：需要在这个元素中的某个地方添加应用clear。可惜这个示例中没有现有的元素的可以清理，所以需要在最后一个段落下面添加一个空元素并且清理它。

方法二：不对浮动的文本和图像进行清理，而是选择浮动div容器。但是下一个元素会受到这个浮动元素的影响。

.news{

     background-color:gray;

    border:solid 1px black;

    float:left;

}

.new img{

   float:left;

}

.new p{

  float:right;

}

<div>

   <img src="/img/pic.jpg" alt="my pic"/>

  <p>some text</p>

 <br class="clear"/>

</div>

方法三：对包围框添加overflow属性，应用值设置为auto或hidden。

.news{

     background-color:gray;

    border:solid 1px black;

    overflow：hidden；

}

.new img{

   float:left;

}

.new p{

  float:right;

}

<div>

   <img src="/img/pic.jpg" alt="my pic"/>

  <p>some text</p>

 <br class="clear"/>

</div>