HTML文字浮动后与顶部有距离,css布局之文档流，定位与浮动

网页布局的定义

网页的布局方式就是浏览器如何对网页中的元素进行排版。

主要分为：文档流，定位，浮动。

文档流

文档流是文档中可显示对象在排列时所占用的位置。

将窗体自上而下分成一行行显示，并在每行中按从左到右的顺序排放元素的效果，就是文档流直观的表现。可分为：块级元素与内联元素。

块级元素(block elements)

块级元素独占一行，自上而下排列，可以设置宽高。宽度是它容器的100%，除非自己设定一个宽度。它可以容纳内联元素和其他块级元素。常见块元素是段落标签'P'。

内联元素(inline elements)

和其他元素都在同一行，从左到右排列，不可设置宽高。内联元素只能容纳文本或者其他内联元素，但容纳块级元素也不会出错，但不建议。常见的内联元素'span'。

脱离文档流的方式：float和position为absolute或者fixed。

定位

position属性：把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

static，position的默认值。没有定位，元素出现在正常的文档流中。

relative(相对定位)

生成相对定位的元素，相对于其正常(原来)位置进行定位。元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。可以微调，不影响其他。top,bottom,left,right的值确定定位元素的位置。

absolute(绝对定位)

生成绝对定位的元素，相对最近的一个position不为static的祖先元素进行偏移。不占据文档流的位置。经常用来布局。top,bottom,left,right的值确定定位元素的位置。

fixed (固定定位)

生成绝对定位的元素，相对于浏览器窗口进行定位。top,bottom,left,right的值确定定位元素的位置。可以做对话框或者悬浮广告。

z-index

z-index指定了一个元素及其子元素的 z-order，元素之间有重叠的时候，z-index可以决定让哪一个元素在上方。通常来说 z-index 较大的元素会覆盖较小的一个。仅对定位的元素有效。

元素之间重叠默认的顺序是后面的元素会盖住前面的元素。如果设置了z-index可以改变这个顺序。但只对同级的元素有效。父元素永远在子元素后面。例子如下：

浮动

浮动由属性值float来体现，通过浮动可以解决图文混排的问题。浮动是脱离文档流的。清除浮动指的是：在非IE浏览器(如Firefox)下，当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响布局的现象，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。如下：

清除浮动的方式：

1.clear：both或left或rihgt

clear有三个属性值分别是both\left\right。写了这个样式的div或者其他标签的两边\左边\右边 就不能有浮动的元素。(只能清楚clear前面的浮动，不管clear后面的浮动。)效果如下：

(div的高度是它里面整个文档流的高度，元素加上clear：both后，能让它在所有浮动元素的下面。)

优点：简单，代码少，浏览器兼容性好。

缺点：需要添加无语义的html元素，代码不够优雅，后期不容易维护

2.after(伪类)

伪类原理：相当于在父元素里添加一个子元素(默认内联元素)，用来清除容器内的浮动元素。效果及编辑方式如下：

优点：兼容性好，稳定。

缺点：代码多

3.clearfix(类)

这是第二种方法的升级版，是用在文章有很多浮动时，你不需要每一个都编辑一次去除浮动。例子如下：

优点：方便快捷

缺点：IE6不支持，css比较多

4.overflow：hidden

利用overflow触发BFC。在BFC中，每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说，则触碰到右边缘)，即使存在浮动也是如此。

优点：只用1个属性，代码少。

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

position:relative和负margin都可以使元素位置发生偏移?二者有什么区别?

position:relative和负margin都可以使元素位置发生偏移,二者的区别在于：

负margin会使元素在文档流中的位置发生偏移，它会放弃偏移之前占据的空间，紧挨其后的元素会填充这部分空间；

相对定位后元素位置发生偏移，它仍会坚守原来占据的空间，不会让文档流的其他元素流入。

如何让一个固定宽高的元素在页面上垂直水平居中?

可以采用绝对定位position：absolute;和负margin做到。

例子如下：代码