CSS注意事项（三）

float特性

文字环绕

破坏性——脱离文档流

包裹性——是本来固定宽度的div宽度随内容变化

清除空格

默认img等标签之间会有空格，添加float属性将紧密相接

清除float

由于float致使父级元素 坍塌，因此要对其进行处理 

• 1.为父级元素 添加 overflow:hidden
• 2.浮动父元素
• 3.在全部浮动元素下方添加一个含有clear:both的元素。
• 4.重要需掌握的方法

.clearfix:after{
content:'';
display:table;
clear:both;
}
.clearfix{
*zoom:1; //兼容IE低版本

<div class="clearfix">
   <img src="" style="float:left" />
   <img src="" style="float:left" />
</div>

position

reative

relative会致使自身位置的相对变化，而不会影响其余元素的位置、大小的变化。 
这是relative的要点之一。还有第二个要点，就是relative产生一个新的定位上下.

absolute

• absolute元素脱离了文档结构。和relative不一样，其余三个元素的位置从新排列了。只要元素会脱离文档结构，它就会产生破坏性，致使父元素坍塌。（此时你应该能马上想起来，float元素也会脱离文档结构）
• absolute元素具备“包裹性”。以前的宽度是撑满整个屏幕的，而此时的宽度恰好是内容的宽度。
• absolute元素具备“跟随性”。虽然absolute元素脱离了文档结构，可是它的位置并无发生变化，仍是老老实实的呆在它本来的位置，由于咱们此时没有设置top、left的值。
• absolute元素会悬浮在页面上方，会遮挡住下方的页面内容.

fixed

fixed永远根据浏览器来进行定位