position與float屬性的使用

1、使用float時，可以說是用於布局，取值主要有left、right、none。就是將該塊的元素浮動起來，在瀏覽器預設的情況下，該元素的位置是為空的，

即脫離了文件流而存在，如果有其他元素，那麼這些元素會將該元素在瀏覽器中本身的位置所佔據，進而將該空白部分填充。

如果元素浮動了，那麼它會對其後面的元素的布局產生影響，所以在設定浮動後，需要對該塊進行浮動的清除，一般採用的方法就是在該浮動元素

後面新增乙個空的div來清除浮動：如以下**：

html**：

css**：

.left

.right

.clear

此外,儘管元素或塊進行浮動了，它的大小時根據內容的大小來決定的，如果需要重新定義區域的高度，那麼可以在css裡設定height屬性來控制浮動層的高度。

使用position屬性：

position定位布局，該屬性常用的值有relative（相對），absolute（絕對）；z-index；

1：設定了position:relative而不設定left,top等屬性的時候，層顯示的位置和不設定position屬性或者position值取static時一樣。

2：當乙個層設定了position:relative，而且使得層位置產生相對偏移（即設定了top、left、bottom、right等屬性的值）時，並不影響文字流中接下來的其他層的位置。在瀏覽器中的位置仍然是存佔位的。

當我們設定position的值為relative時，層依然存在於文字流中，也就是不管位置是否偏移，文字流中依然為它保留了該有的位置。但當層設定了position:relative並產生偏移（設定了top,left等值）時，

該層將完全從文字流中脫離，進而以該層所在的父容器的座標原點為參考點進行偏移，可以這理解，該層已經和同級容器中的其它元素脫離了關係，也不會對其它元素產生任何影響。

一般我們在使用定位布局的時候，通常情況下是在父級標籤上設position:relative，在需要定位的層上設position:absolute；top：20px；left：10px；，這樣控制起來相對比較好控制...，

但此時，需要定位的層就已經脫離了文件流而存在。