02. CSS基础

2.5 浮动布局

---

2.5.1 浮动导致的布局变动

1. 对于块级元素来讲，在不设置宽度的情况下，默认的宽度是100%；一旦设置了浮动，他的宽度就会根据内容进行自动调整；
2. 设置了浮动的元素会脱离正常的文档流；例如，默认情况下父元素的高度会根据子元素的内容进行调整，如果将子元素设置为浮动后，父元素的高度就会变为0；
3. 虽然浮动元素脱离了文档流，但是里面的内容仍然占据空间，会根据相对位置进行布局；

2.5.2 清除浮动

1. clear属性

.clear{
    clear: both; /*左右两侧都不允许出现浮动元素*/
}

2. 对父元素使用:after伪类

.clearfix:after{
    clear: both; /*左右两侧都不允许出现浮动元素*/
}

2.6 CSS定位

---

position属性有五个值：static, relative, absolute, fixed, inherit;

2.6.1 相对定位---position: relative/static;

相对于其他元素进行定位，区别在于static不能控制位移，relative可以；

注意：脱离了文档流的元素，例如设置了浮动和绝对定位的元素不会对相对定位产生任何影响。

1. static，默认值

在使用static的情况下，top、right、left、bottom、z-index都不会生效。

2. relative

表现与static一样，只是可以通过设置top、right、left、bottom、z-index控制位置。

2.6.2 绝对定位

绝对定位的几个特点：

• 块级元素的宽度在未定义时不再为100%，根据内容自动调整，类似于设置了浮动。
• 脱离正常的的文档流。
• 在不定义z-index的情况下，absolute元素会覆盖在其他元素之上。

1. absolute

相对于上一个不是static的父元素进行绝对定位，如果不指定父元素的position，absolute将会相对于整个html文档进行绝对定位；

2. fixed

相对于浏览器窗口进行定位；
ie6，ie7不支持fixed属性，兼容性方案：