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永远根据浏览器来进行定位

 

来源：oschina

链接：https://my.oschina.net/u/2882840/blog/738738