Div盒模型+浮动

盒模型

在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、外框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

假设框的每个边上有px的外边距和5px的内边距，如果希望这个框达到100px宽，就需要将内容的宽度设置为70px。

Ps：外边距可以是负值。

外边距叠加

• 当两个或更多垂直外边距相遇时，他们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。
• 当一个元素包含在另一个元素中时（假设没有内边距或边框将外边距分隔开），元素的顶外边距就会与父元素的顶外边距发生叠加。

假设有一个空元素，他有外边距，但是没有边框或内边距。此时，顶外边距和底外边距就碰到一起，发生叠加。
只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。

CSS定位机制

• 普通流
• 浮动
• 绝对定位

块级框从上到下一个接一个地垂直排列，框之间的垂直距离由框的垂直外边距计算出来。
行内框在一行中水平排列。可以使用水平内边距、边框和外边距调整他们的水平间距。垂直内边距、边框、外边距不影响行内框的高度。
由一行形成的水平框称为行框，行框的高度总是足以容纳它包含的所有行内框。但是，，设置行高可以增加这个框的高度。

将dispaly的属性设置为inline-block。顾名思义，这个声明让元素像行内元素一样水平地依次排列。但是，框的内容仍符合块级框的行为。
框可以按照HTML元素的嵌套方式包含其他框。大多数框由显式定义的元素形成。但是，如果将一些文本添加到一个块级元素（例如div）的开头时。即使没有把这些文本定义为块级元素，他也会被当作块级元素对待。

相对定位

将一个元素相对定位，他将出现在他所在的位置上，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点移动。如果将top设置为20px，那么它就会向下移动20px。
Ps：在使用相对定位时，无论是否移动，元素仍然占据原来的空间。因此，移动元素会导致他覆盖其他框

绝对定位

相对定位实际上被看作普通流定位模型的一部分，因为元素的位置是相对于他在普通流中的位置。与之相反，绝对定位使元素的位置与文档流无关，因此不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在一样。

决定定位的元素的位置是相对于距离它最近的那个已定位的祖先元素确定的。如果元素没有已定位的祖先元素，那么他的位置是相对于初始包含块的。
绝对定位的框与文件流无关，所以他们覆盖页面上的其他元素。可以通过设置z-index属性来控制这些框的叠放次序。z-index值越高，框在栈中的位置就越高

如果扩大绝对定位的框，周围的框不会重新定位。因此，尺寸的任何改变都会导致绝对定位的框产生重叠。

固定定位

固定定位是绝对定位的一种，差异在于固定元素的包含块是视口（viewport）。这使我们能够创建总是出现在窗口中相同位置的浮动元素。

浮动

浮动框不在标准文档流中，一个元素设置浮动之后，他就脱离了标准文档流，不占据空间。他会超设置的方向移动，直到他的边缘碰到包含框的边缘。

行框和清理

如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现得像浮动根本不存在一样。但是框的文本内容会受到会受到浮动元素的影响
应用：创建浮动框使文本可以围绕图像。
想要阻止行框围绕在浮动框的外边，需要对包含这些行框的元素应用clear属性。clear属性的值可以是left、right、both或none，他表示框的哪些边不应该挨着浮动框
在清理浮动时，浏览器在元素顶上添加足够的外边距，使元素的顶边缘垂直下降到浮动框下面。
对元素进行清理实际上为前面的浮动元素流出了垂直空间。

案例：假设有一张图片，希望让它浮动到一个文本块的左边。然后将他们包含在另一个具有背景颜色和边框的元素中。
但是浮动元素脱离了文档流，所以包围图片和文本的div不占据空间。
- 这时就需要在这个元素中的某个地方应用clear。但是父元素div中没有现有的元素可以清理，所以要在最后一个段落中添加一个空元素并且清理它。
可以添加一个<br class="clear" / >
- 或者直接浮动容器div