CSS徹底研究(3)-浮動,定位-jerrylsxu

來源：懂視網責編：小采時間：2020-11-27 16:43:46

CSS徹底研究(3)-浮動,定位-jerrylsxu

CSS徹底研究(3)-浮動,定位-jerrylsxu: CSS徹底研究(3)-浮動,定位一 . 浮動float I . 定義及規則 float默認為none,對應標準流的情況。當float : left;時，元素就會向其父元素的左側靠緊，脫離標準流，同時寬度不再伸展至充滿父容器，而是根據自身內容來確定。 II . 演示規則準備代碼 h

推薦度：

點擊下載本文 文檔為doc格式

導讀CSS徹底研究(3)-浮動,定位-jerrylsxu: CSS徹底研究(3)-浮動,定位一 . 浮動float I . 定義及規則 float默認為none,對應標準流的情況。當float : left;時，元素就會向其父元素的左側靠緊，脫離標準流，同時寬度不再伸展至充滿父容器，而是根據自身內容來確定。 II . 演示規則準備代碼 h

CSS徹底研究(3)-浮動,定位

一 . 浮動float

I . 定義及規則

float默認為none,對應標準流的情況。當float : left;時，元素就會向其父元素的左側靠緊，脫離標準流，同時寬度不再伸展至充滿父容器，而是根據自身內容來確定。

II . 演示規則

準備代碼



 
 
 


 
 #son1
 #son2
 #son3-son3son3son3
 
 這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字

中間給#father加上position:absolute,是為了消除未定位父div的margin-top傳遞問題,見http://blog.sina.com.cn/s/blog_6bec36f9010110w9.html
顯示效果為
1,2的float分別為left right時,有

可見1,2脫離標準流,標準流中的son3當他們不存在,于是son3代替原來son1的位置,而son1的左border、son2的右border與son3的左右border重合
當1,2,3全都float left時

文字圍繞著float過的div
1,2左浮動，3右浮動，當窗口寬度減小時，3會被擠下來

當3左浮動，2右浮動的時候，顯示為

當瀏覽器窗口寬度減小時，猜猜誰會被擠下來，son2么？

答案還是son3，規則為：寫在html文件中后面的會被擠下來，在html文件中，son3在son2后面，因此總是son3先擠下來。
增加son1高度，son3擠下來時會卡在那里
刪除盒子中的文字，3個子div全部左浮動
顯示為

父div中的三個子div全部脫離標準流了,父div就縮成一條線了,可以用clear來修正
加一個margin-padding-border全為0,clear為both的空div,來撐大父div

III . clear清除浮動

如果前面有float:left的元素,他會影響下面元素,如上例中的p,在p元素中寫clear : left即可消除前面左浮動元素對本元素的影響.同理clear:both是左右都清除.

二 . 定位position

position取值有static absolute relative fixed

1. static

這個是默認的,即標準流排下來,就是static定位方式.

2. fixed

在瀏覽器窗口中固定,什么論壇中的[回到頂部]這種按鈕就是fixed做的
練習做個回到頂部玩玩


 回到頂部

#backToTop
{
 width: 100px;
 height: 50px;


 background-color: red;
 color: white;
 cursor: pointer;
 border-radius: 25px 0 0 25px;
 padding-left: 20px;


 text-align: center;
 line-height: 50px;

 position: fixed;
 bottom: 80px;
 right: 0;
}

顯示效果