可视化格式模型：css的浮动、定位、盒模型

桃子叔叔原创，转帖请注明

---

桃子叔叔有话说：

在很多前端工程师的认知里，前端三剑客中js是重中之重，学好了js，掌握了spa框架和自动化工程化的一系列工具就无敌了，而往往忽略了css基础的知识，特别是平时忙于业务，随便问上一嘴，基本都是磕磕巴巴，很难像js一样了然于胸。桃子叔叔今天特意回头去看css最基础最重要但也是最容易忽视的部分，拿起来温习，希望可以和小伙伴们一起切磋，有任何错误的地方望可劲拍砖。由于桃子叔叔非常懒，文中所有的图片均来自百度图片，在此感谢各位图片贡献者，若有冒犯，多喝啤酒。

css需要掌握的最重要的三个概念是：浮动、定位、盒模型，这些概念控制在页面上的安排和显示元素的方式。使用css开发站点需要完全掌握盒模型的复杂性、绝对定位和相对定位之间的差异以及浮动和清理的实际工作方式。掌握了这些知识点之后再开发站点就更加得心应手了。

桃子叔叔的这篇博客主要总结了以下几个知识点：

1. 盒模型的复杂性和特点
2. 外边距叠加
3. 绝对定位和相对定位之间的差异
4. 浮动和清理

一、盒模型

1. 盒模型简介

页面上每个元素都被看成一个矩形框，这个框由元素的内容、内边距、边框和外边距组成。为了方便大家了解，我在百度找了一张图片，通过下面的图片可以很直观的看到盒模型的构成：

图片来自于百度

• 内边距（padding）在内容周围，常使用padding在内容周围创建一个隔离带，是内容不与背景混在一起。
• 边框（border）是内边距外的一条线，有实线、虚线、点线等多种样式。
• 外边距（margin）在边框外，margin是透明的，用它控制元素间的间隔

• 轮廓（outline）在外边距外，与border不同，不影响元素的大小和定位，有助于修复bug

  增加内边距、边框和外边距不会影响内容的大小，但是会影响元素框的总大小。
  
  图片来自于百度

  上图中的内容区域宽度为70px，由于设置了padding=5px; margin=10px; 使得整体元素框的width为100px。

2、 外边距叠加

当两个或多个垂直外边距相遇时，它们形成一个外边距，这个高度等于两个发生叠加外边距中的较大者。因此外边距叠加只发生在垂直外边距上。

外边距合并一般有以下几种情形：

• 一个元素在另一个元素上面时，第一个元素的底外边距与第二个元素的顶外边距发生叠加

• 一个元素包含在另一个元素中，它们的顶或底也会发生叠加
  
  图片来自于百度

  上图中的实例就是一个元素在另一个元素上面时，第一个元素的底外边距与第二个元素的顶外边距发生叠加。

  
  图片来自于百度

  上图中第一个实例，一个空元素，它有外边距，但没有内边距、边框和内容，它的顶外边距和底外边距发生了叠加。
  上图中第二个实例，这个空元素已叠加的外边距与其他元素的外边距发生叠加。

注意：只有普通流中块框的垂直外边距会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会发生叠加。

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

图片来自于百度

二、定位

1、普通流

html元素分为块级元素和行内框，除非专门指定，所有框都在普通流中定位。可以使用display的属性block、inline-block、none来修改框的类型。

• 块级框一个接一个垂直排列，垂直距离由框的外边距计算得到
• 行内框在一行中水平排列，可以用水平内边距、边框、水平外边距调整水平间距，修改行内框高度的方法是修改行高。
• 使用display：inline-block 可以让元素像行内元素一样排列，但是框的内容仍然符合块级框的行为，可以显示的设置宽度、高度、垂直外边距和内边距。

2、相对定位

相对定位是元素相对于文档流中的初始位置，可以设置垂直和水平位置，让元素相对于初始位置动起来。下面的代码将实现下图的实现效果

.mybox{
  position:relative;
  top:20px;
  left:30px;
}

图片来自于百度

使用相对定位，无论位置如何移动，仍然将占有原来的空间，因此移动元素会覆盖其他的框。

3、绝对定位

与相对定位是元素相对于文档流中的初始位置不同，绝对定位是相对于距离它最近的已定位祖先元素，如果不存在已定位的祖先元素则相对于初始包含块。

图片来自于百度

另外还有一点不同，相对定位的元素看成是普通流中的一部分，绝对定位的元素的位置脱离了文档流，因此不占据空间，普通文档流中的其他元素就像是绝对定位的元素不存在一样。如图中框2就是相对祖先元素实现了绝对定位。

4、固定定位

• 首先固定定位是绝对定位的一种。
• 其次固定定位的包含块是视口(viewpoint)

三、浮动

1、浮动元素

浮动的框可以左右浮动，知道它的外边缘碰到包含框或者另一个浮动款的边缘。因此浮动框不在普通的文档流中，那么浮动的元素是否和绝对定位一样，在普通流中表现的好像不存在一样呢？答案是否定的，浮动的表现和绝对定位的效果还是有区别的。具体请看下图

上图就是很好的例子，浮动元素旁的行框被缩短，从而给浮动元素流出空间，因此行框围绕浮动框

2、清理浮动

• 清理浮动可以使用clear属性，clear属性值可以有left、right、both或none，表示框的那些边不应该挨着浮动框
• 清理的实现原理：清理元素时，浏览器在元素上方添加了足够大的外边距，使得元素的顶边缘垂直下降到浮动框下面。
• 对元素进行清理实际上是为前面的浮动元素留出了垂直空间
  清理浮动有很多实现方式，这里主要介绍四种

第一种：结尾处加空div标签 clear:both

<style type="text/css"> 
.div1{background:#000080;border:1px solid red} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
/*清除浮动代码*/ 
.clearfloat{clear:both} 
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
<div class="clearfloat"></div> 
</div> 
<div class="div2"> 
div2 
</div> 

通过底部添加div使用clear属性清除了浮动，实现了我们想要的结果，但是增加了不必要的代码块，这是最直接的方式但不是最优的方式。

第二种：浮动父元素

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left} 
.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div> 
<div class="div2"> 
div2 
</div> 

这种方式虽然实现了我们想要的结果，但是造成了新的浮动，因此有人说这种方式的优点是没有优点，尴尬?

第三种：父级div定义 overflow:hidden或auto

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div> 
<div class="div2"> 
div2 
</div> 

因为将 overflow设置为hidden或auto有一个有用的副作用，这会自动的清理包含的任何浮动元素。但是这种方式的缺点是，使用hidden时若与position一起使用，超出的部分会被隐藏。使用auto时，如果内部的宽高超出父级div会出现滚动条。

第四种：父级div定义 伪类:after 和 zoom

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
/*清除浮动代码*/ 
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1} 
</style> 
<div class="div1 clearfloat"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div> 
<div class="div2"> 
div2 
</div> 

IE8以上和非IE浏览器才支持:after，原理和方法一有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题。

桃子叔叔在这篇博客中回顾了盒模型以及内边距、外边距、宽度高度如何影响框的尺寸；外边距的叠加；css中的3中格式化模型：普通流、绝对定位和浮动；了解行内框和块框之间的差异，如何在相对定位的祖先元素中进行绝对定位，并讨论了清理浮动的实现方式。