CSS 布局

static 默认

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中。

float 浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。（w3c）上面是官方的界定。我们可以用”float:left”和”float:right”来使元素块向左向右浮动.当一个元素块被浮动后，其在原文档流中的空间被关闭，后面的内容会向前补充，这样很容易造成后面的元素包围了浮动的元素块。为了解决这个问题，我们可以用clear方法来阻止行框包围元素块。

absolute 绝对定位

绝对定位是相对于最接近的已定位父元素的起点为基准，如果没有已定位的父元素，则为其最初的包含快，也就是body。绝对定位相对于相对定位的不同，是其在文档流中的元素框被关闭，该位置被后面的元素填充。

relative 相对定位

相对定位是相对于自身在文档流中的原有位置的起点为基准进行位移定位。其在文档流中的位置不会被关闭。 发生偏移的时候，可能会覆盖其他元素。

sticky 粘性定位 (css3 新增)

相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位 。别人家的案例。

清除浮动

1、clear

.clear{ clear:both} 

<div class="divcss5"> 
   <div class="divcss5-left">left浮动</div> 
   <div class="divcss5-right">right浮动</div> 
   <div class="clear"></div> 
</div>

**2、父级div定义 overflow:hidden **

.divcss5 { overflow:hidden} 

参考

https://segmentfault.com/a/1190000011358507

http://www.divcss5.com/jiqiao/j406.shtml