CSS float和position属性

1. 浮动

CSS float属性定义了元素在水平方向的浮动。该元素从网页的正常流动（文档流）中移除，对于浮动元素后的块级元素，块级元素将会被浮动元素覆盖，并且会接着其上一个文档流中的元素，按文档流的规则进行排列，即浮动元素不会影响紧随着它的块级元素的排列。对于接着浮动元素的行内元素（包块行内块元素），行内元素会环绕在浮动元素周围。浮动元素默认是行内块级元素，相邻浮动元素之间的元素排列也符合标准文档流。在CSS中，任何元素都可以设置成浮动元素。

特点

• 行内元素环绕
• 脱离标准文档流
• 默认属于行内块元素
• 浮动元素无法撑起父元素的高度
• 未指定宽度时，浮动元素收缩成文本的宽度

父元素的塌陷

假设一个父元素中有若干个子元素，若其中有几个或全部子元素的属性都设置成浮动，而父元素没有设置高度。则会出现以下现象：

1）子元素全部设置成浮动元素，由于浮动元素无法撑起成父元素的高度，父元素的高度将会坍塌为0；

2）子元素中有一些元素设置成浮动元素，这些浮动元素也无法撑起父元素的高度，但剩下的非浮动元素可以撑起父元素，也就是说此时父元素的高度就其非浮动子元素按标准文档流排列时的高度。

浮动元素的清楚（解决父元素的坍塌）

有以下几种方式：

1）简单粗暴，给父元素设置宽高；但这个方法使用不灵活，后期维护不易，主要应用在网页中高度长时间不变的区域，比如导航栏。

2）内墙法：在最后一个浮动元素后面添加一个空的块级元素，并设置其属性clear: both; 。缺点：结构冗余。

3）伪元素（选择器）清楚法：给所有要清楚的浮动的父元素设置同一个类，对这个类的三个属性content, display, clear的值分别设置成 '', block, both。

4）把父元素的overflow的属性值设为：hidden。

浮动元素位置的调整

可通过margin调整位置，比如：50px; 50%(边框的位置在50%处）。

2. 定位

CSS position属性规定了元素的定位类型。不同的定位类型其位置的调整方式不同。

static

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

relative

相对定位，相对于其正常位置的定位，未脱离标准文档流。其后面的元素会接着它原来的位置，按标准文档流的形式排列下去；而其现在在页面上显示位置，并不会影响标准文档流的排列。

absolute

绝对定位，相对于除static定位外的第一个父元素的定位。绝对定位元素脱离了标准文档流，并且会覆盖在标准文档流上面

fixed

固定定位，相对于浏览器窗口左上角的定位。固定定位脱离了标准文档流，并且会覆盖在标准文档流上面。

定位元素位置的调整

可通过margin与top, bottom, left, right来调整，比如left:  50%； margin-left:  -50px; 。

z-index属性

z表示z轴，垂直于屏幕，并指向外；z-index表示在z轴上的位置，所以z-index大的元素会覆盖z-index小的元素，定位不为static的元素才有z-index属性。有两个要点：

1）如果z-index的值都设为auto，则后出现元素的z-index越大；

2）父级的z-index属性优先级更高，因为子元素是依附在父元素上的。