處理塊元素獨佔一行,可以使用display,也可以使用浮動和定位
浮動 float
浮動是指:當前元素,脫離文件流,預設在當前的行對既定的方向進行移動(預設橫排)
浮動的影響
自身的父元素無法獲取寬高
後續的元素會自動補位
浮動會脫離當前文件流,覆蓋標準流的元素
auto會失效
(auto):根據自身的所佔位置,自動居中,但必須注意塊元素可以橫排顯示(失去獨佔一行的特性)
行元素可以設定寬度和高度
除了auto以外,依然支援margin
提公升半個層級 z-index
清除浮動
使用浮動布局,那麼一定要清除浮動,否則原地**!
方法一:
方法二:
方法三:"main" style=
"overflow: hidden;"
>
="box1"
>
<
/div>
="box2"
>
<
/div>
="box3"
>
<
/div>
="box4"
>
<
/div>
<
/div>
方法四:"main"
>
="box1"
>
<
/div>
="box2"
>
<
/div>
="box3"
>
<
/div>
="box4"
>
<
/div>
"clear: both; width: 0px; height: 0px"
>
<
/div>
<
/div>
方法五:"main" style=
"display: inline-block;"
>
="box1"
>
<
/div>
="box2"
>
<
/div>
="box3"
>
<
/div>
="box4"
>
<
/div>
<
/div>
定位 position//製作工具
.clearfix:after
;//啟用工具
.clearfix
//使用工具
="box clearfix"
>
="left"
>我是左浮動<
/div>
<
/div>
!! 無論什麼定位,都要優先考慮它的參考物件 !!
預設定位
所謂預設定位是指:不使用定位(有點腦殼疼,但這是最容易的忘掉的)
相對定位
相對的是自身原有的位置
相對定位移動後,會保留原有位置 ( 可以使用定位占用,但普通寫法 時,無法占用 )
不會影響文件流
適用場景:
絕對定位脫離當前文件流,使元素"飄"起來,父級沒有獲取寬高position: relative;
/* 1) 開啟該元素的定位*/
/*書寫具體的位置*/
/*只有 left 和 top 兩個屬性 */
/*top: 300px;*/
left:
300px;
絕對定位 的參考值: 會去找具有相對定位屬性的父元素
如果沒有,繼續往上找,直到整個文件
90%以上的絕對使用場景,都需要相對定位來配合。
也就是人們趣稱為: 「父相子絕」
適用場景:
固定定位/* position: absolute;*/
/*left: 300px;*/
top:
30px;
/* z-index : 數字;
作用: 調整當前元素的層級
注意: 1. 屬性值沒有單位,只寫數字。記得分號結尾
2. 如果需要調整的元素個數較多時,需要將每個元素的層級,都明確劃分
*/ z-index:
1;
position: fixed;
bottom:
0px;
left:
0px;
/* top: auto; */
定位 與浮動
1 區塊浮動 絕對定位 脫離正常的文件流,相當於飄起來 向 飄起來,於是就有了float 1,div 是塊級元素,他會自動換行 2,對元素使用 float 浮動的話,他會自動的把定位方式變為 絕對定位 如果絕對定位之後,這個元素下面還有元素,會頂上去 注釋 正常情況下,按照上下的順序正常顯示,當浮動...
浮動與定位
浮動 浮動元素會以某種方式從文件的正常流中刪除,再按照屬性值移動到制定的位置,浮動元素從某種意義上來說自成一派,但是他仍會對文件布局產生影響。注意事項 a.如果要對乙個非替換元素進行浮動,那麼必須為該元素宣告乙個寬度,否則,根據css規則,元素寬度近似為0,元素布局將會出現意想不到的結果。b.元素宣...
浮動與定位
1 元素的浮動屬性float的 基本的格式 選擇器一般他的值包過3個在內 屬性值 描述 left 元素會向左浮動 right 向右 none 不浮動 2 清除浮動 clear的屬性 選擇器屬性值 描述 left 不允許左側有浮動元素 清除左側浮動的影響 right 不允許右側有浮動元素 清除右側浮動...