CSS渲染页面的时候，把每个文档元素看作是盒子。
CSS盒子模型
margin，padding，border，内容。
margin会出现margin折叠。上下元素的margin折叠。左右的不折叠。包含的元素之间marign也会折叠。margin折叠的好处是文档排版齐整。
每个元素都会有一个框。这个框分两种类型。块级元素的块框、行内元素的行内框。
行框：还有行框的概念，行框的高度由中间最高的行内框决定。设置行内框的高度、padding、margin并不影响行框的高度。行框的高度line－height可以设置行高。
匿名框。匿名框不容易设置样式（:first－line）
CSS有三种渲染模型。
自然文档流、position、float。
float：浮动元素脱离文档流。可以左浮动、右浮动。浮动脱离文档流，块元素忽视浮动元素、自然排版，但是，块元素里面的文本元素缺感知到浮动的存在，围绕浮动排版。可以使用clear清除浮动。
float元素的父元素高度为0.
1，添加标签，清除浮动。
2，overflow
3，父元素float
4，after元素。
postion
relative：还在自然流中，相对自然流中的位置偏移。
absolute：不在自然流中，相对position设置为 relative，absolute，fixed的祖先元素定位，如果没有就是初始包含块。
fixed：相对视窗定位。