css布局之文档流，定位与浮动

2017-07-02 本文已影响0人疯小儿

网页布局的定义

网页的布局方式就是浏览器如何对网页中的元素进行排版。
主要分为：文档流，定位，浮动。

文档流

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

块级元素（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配合使用，因为超出的尺寸的会被隐藏。