div排版+文档流+定位秘诀

因为没有找到本身认为完整的关于普通流、浮动和绝对定位的中文文章，因而鼓起勇气决定本身来写篇。

在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型能够是 block ，或者是 inline ，但不能同时属于这二者。而且， Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 inline formatting context(行内格式化上下文) 里格式化。

　　咱们知道，任何被渲染的元素都属于一个 box ，而且不是 block ，就是 inline 。即便是未被任何元素包裹的文本，根据不一样的状况，也会属于匿名的 block boxes 或者 inline boxes。因此上面的描述，便是把全部的元素划分到对应的 formatting context 里。

　　组合上面的定义，而且姑且先把 formatting context 看作是一种范围限定，那么具体讲，普通流就是这样的过程：

　　1.在对应的 block formatting context 中，块级元素按照其在HTML中的顺序，在其容器框里从左上角开始，从上到下垂直地依次分配空间、堆砌( stack )，并独占一行，边界紧贴父容器。两相邻元素间的距离由 margin 属性决定，在同一个 block formatting context 中的垂直边界将被重叠( collapse )。而且，除非建立一个新的 block formatting context ，不然块级元素的宽度不受浮动元素的影响(这就是浮动元素能盖在块级元素上面的缘由)。

　　2.在对应的 inline formatting context 中，行内元素从容器的顶端开始，一个接一个地水平排布。水平填充、边框和边距对行内元素有效。但垂直的填充、边框和空白边不影响其高度。一个水平行中的全部 inline box 组成了名为 line box 的矩形区域。 line box 的高度始终容下全部的 inline box ，并只与行高有关。 line box 的宽度受到父容器和浮动元素存在的影响(这就是文本环绕浮动元素)。若是 line box 的宽度小于容器， line box 的水平排布就取决于 text-align 。若是 line box 的宽度大于容器，则截断 line box 并换行在新的 line box 中从新排布元素(截断处不该用 padding 和 margin 值)。若是 line box 没法截断，如单词过长或者指定不换行，则会溢出容器。

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

因为浮动框不在文档的普通流中，因此文档的普通流中的块框表现得就像浮动框不存在同样。

 

CSS 浮动

请看下图，当把框 1 向右浮动时，它脱离文档流而且向右移动，直到它的右边缘碰到包含框的右边缘：

再请看下图，当框 1 向左浮动时，它脱离文档流而且向左移动，直到它的左边缘碰到包含框的左边缘。由于它再也不处于文档流中，因此它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

若是把全部三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

以下图所示，若是包含框太窄，没法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。若是浮动元素的高度不一样，那么当它们向下移动时可能被其它浮动元素“卡住”：

CSS float 属性

在 CSS 中，咱们经过 float 属性实现元素的浮动。

如需更多有关 float 属性的知识，请访问参考手册：CSS float 属性。

行框和清理

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

所以，建立浮动框可使文本围绕图像：

要想阻止行框围绕浮动框，须要对该框应用 clear 属性。clear 属性的值能够是 left、right、both 或 none，它表示框的哪些边不该该挨着浮动框。

为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直降低到浮动框下面：

这是一个有用的工具，它让周围的元素为浮动元素留出空间。

让咱们更详细地看看浮动和清理。假设但愿让一个图片浮动到文本块的左边，而且但愿这幅图片和文本包含在另外一个具备背景颜色和边框的元素中。您可能编写下面的代码：

.news {  border: solid 1px black; }

.news img { float: left; }

.news p { float: right; }

<div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div>

这种状况下，出现了一个问题。由于浮动元素脱离了文档流，因此包围图片和文本的 div 不占据空间。

如何让包围元素在视觉上包围浮动元素呢？须要在这个元素中的某个地方应用 clear：

不幸的是出现了一个新的问题，因为没有现有的元素能够应用清理，因此咱们只能添加一个空元素而且清理它。

.news {  border: solid 1px black; }

.news img { float: left; }

.news p { float: right; }

.clear { clear: both; }

<div class="news"> <img src="news-pic.jpg" /> <p>some text</p>  </div><div class="clear"></div>

这样能够实现咱们但愿的效果，可是须要添加多余的代码。经常有元素能够应用 clear，可是有时候不得不为了进行布局而添加无心义的标记。

不过咱们还有另外一种办法，那就是对容器 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>

这样会获得咱们但愿的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的全部东西进行浮动，而后使用适当的有意义的元素（经常是站点的页脚）对这些浮动进行清理。这有助于减小或消除没必要要的标记。

事实上，W3School 站点上的全部页面都采用了这种技术，若是您打开咱们使用 CSS 文件，您会看到咱们对页脚的 div 进行了清理，而页脚上面的三个 div 都向左浮动。