定位与浮动

                    定位：

                   static:元素框正常生成，正常的文本流。

                  relative：元素框偏移某个角落。元素仍保持未定位前的性状，它原本所占的空间仍保留。实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通留的位置。

                 absolute:元素框文档流完全删除，并相对其包含块定位。元素流原先在正常文本流的空间会关闭，就像不存在一样。元素的位置与文档流无关，不占据空间。绝对定位相对于最近定位祖先元素，如果没有已经定位的祖先元素，则对最初的包含块进行定位。

                 fixed:跟position的absolute属性差不多，不过其包含块是视图本身。

             浮动：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

           浮动框旁边的行框被缩短，给浮动框留出空间，行框围绕浮动框。

              

            

           如图所示，当图像和文字一起浮动时脱出文本流，容器没有实际宽度不能包围浮动元素。此时解决方案有：

          一，由于没有现有的元素可以清理浮动，只能添加一个空元素并清理它。

              .news img {  float: left; }

.news p {  float: right;  }

.clear {clear: both;}

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

<div class="clear"></div>

</div>

           二，对容器div进行浮动。但会对周围的元素进行浮动。

                .news {  border: solid 1px black;

                                float: left; }

.news img {float: left;}

.news p { float: right;}

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

</div>

     三，用overflow属性：对父元素用overflow:hidden属性，可以解决这个问题。