CSS传统布局之display属性+float属性+position属性

这三个属性是传统网页布局中经常用到的属性。

 

读这篇文章之前，希望你对css布局模型已经有了一定的了解。因为本文的三个属性是和css三个布局模型紧密联系在一起的。因此，如若你并不了解，我推荐你先看一下css布局模型这篇文章。

 

一、display属性

The display property specifies the type of box used for an HTML element.

display属性是与盒模型紧密相连的属性，大多数情况下定义了元素是block-level,inline-level还是inline-block-level, 当然还有很多其它的值。关于display属性详细的内容可以点这里，或是百度谷歌搜索即可。

 

 

二、float属性

float:none; 默认值，没有浮动，正常文档流。

float:right; 元素须浮动在其所在块元素的右侧。

float:left;  元素须浮动在其所在块元素的左侧。

float:initial; initial关键字，定义了float属性值应该为默认值，即none

float:inherit; 从父元素继承属性值。

按照张鑫旭博客中的说法，浮动的意义仅仅是文字环绕显示而已，浮动的本质是浮动的本质是“包裹及破坏”，我觉得这个说法不错。而目前我们大量适用于页面的整体布局中，确实是违背了这个属性的原意。

 

三、position属性

position:static;     默认值，Elements render in order, as they appear in the document flow，正常的标准文档流

position:relative;  The element is positioned relative to its normal position. 未脱离标准文档流，相对自身正常位置移动。

position:absolute; The element is positioned relative to its first positioned (not static) ancestor element.脱离文档流

position:fixed;      The element is positioned relative to the browser window.  脱离文档流

 

 

请注意以下：

未脱离文档流，即浏览器按照dom结构从上而下，从左而右对页面进行渲染时，某元素按照顺序出现在页面中。

 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

 

 

float和position都可以让元素脱离文档流，但是两者依然有些许差异如下：

1. float:left 和float:righ可以使一个元素脱离正常的文档流，然后被安放到它所在容器的的左端或者右端，但是所在容器的其他的文本和行内元素围绕它安放。（这一点再次说明了浮动的本意，即仅仅是行级元素的环绕而已）
2. position:absolute和position:fixed会使该元素脱离文档流，同时其他盒子与其他盒子内的文本都会无视它，因此可能会出现该元素覆盖在其他元素之上的情况。

 这篇文章适合和css的核心之一布局模型结合起来看，可能更有效果。