## 一、盒模型 当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。 * `Margin(外边距)`清除边框外的区域，外边距是透明的。 * `Border(边框)`围绕在内边距和内容外的边框。 * `Padding(内边距)`清除内容周围的区域，内边距是透明的。 * `Content(内容)`盒子的内容，显示文本和图像。  ## 二、浮动 浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。浮动的元素在普通文档流的上面一层，更靠近屏幕的上层。 ``` div { float: left; } ``` :-:  默认三个设置了宽高的`block`元素，本来会格子独占一行；如果框1设置了`float:right`，他会忽略框2和框3，直到碰到父元素；如果，框1设置成`float:left`，就会覆盖住处在普通文档流中的框2。  * 浮动会向左/向右浮动，直到碰到另一个浮动元素为止，这样可以使区块元素在一行显示。 * 当三个区块都浮动，而一行的空间不够了，会引起元素换行。 * 但是如果每个元素的高度不一致，会出现“卡住”的情况。 ~~~ <style> .box-wrapper { border: 5px solid red; } .box { float: left; width: 100px; height: 100px; margin: 20px; background-color: green; } </style> <div class="box-wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> ~~~  很明显，这样的效果并不符合我们的预期，所以我们需要想办法解决这个问题。现在，我们需要清除浮动！ 清除浮动的底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。**我们是通过在别的元素上清除浮动来实现撑开高度的， 而不是在浮动元素上。** ``` <div class="box-wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div style="clear:both;"></div> </div> ``` ## 三、定位 CSS 有三种基本的定位机制：普通流、浮动和定位。 position 属性设置元素定位类型，可以通过 top, bottom, right, left属性，控制元素的定位位置。position 属性值有`static`、`relative`、`absolute`、`fixed`四个值。 * `static`静态定位：HTML元素的默认值，即没有定位，元素出现在正常的流中。 * `fixed`固定定位：脱离标准流，在页面中不占位置，永远相对于浏览器的边框来定位。 * `relative`相对定位：不脱离标准流，在页面中占位置，相对于自己原来的位置来进行定位。 * `absolute`绝对定位：脱离标准流，在页面中不占位置（浮起来），绝对于已经定位的上层元素，若没有则绝对于页面主体 body。