CSS學習筆記6——網頁布局

?一、元素的浮動屬性、清除浮動

清除浮動的其他方法?

1、使用空標簽清除浮動影響

2、使用overflow屬性清除浮動

3、使用偽元素清除浮動影響

原理

overflow屬性?

二、元素的定位?

?1、相對定位

2、絕對定位?

?編輯?3、固定定位

z-index層疊等級屬性

?一、元素的浮動屬性、清除浮動

在CSS布局中，浮動元素會脫離文檔流，導致父元素高度塌陷、后續元素布局錯亂等問題。?

清除浮動的作用

防止父元素塌陷：當子元素浮動時，父元素的高度可能無法正確包含浮動的子元素，導致父元素“塌陷”，影響整體布局。清除浮動可以確保父元素能夠正確包含浮動的子元素，使其高度正常計算。

避免影響后續元素布局：浮動元素會脫離正常的文檔流，可能會對后續的非浮動元素的布局產生影響，導致頁面布局混亂。清除浮動可以避免這種情況，使后續元素能夠按照正常的文檔流進行布局。

提高布局的穩定性：在復雜的布局中，浮動元素的不確定性可能導致頁面在不同瀏覽器或設備上顯示不一致。清除浮動可以提高布局的穩定性和兼容性。

<style type="text/css">.father{                      /*定義父元素的樣式*/background:#eee;border:1px dashed #ccc;}/* 淺灰色背景，淺灰色虛線邊框。 */.box01,.box02,.box03{         /*定義box01、box02、box03三個盒子的樣式*/height:50px;line-height:50px;background:#FF9;border:1px solid #93b7ff;margin:15px;padding:0px 10px;float: left;}/* 淺黃色背景，藍色實線邊框，高度50像素，文字垂直居中，外邊距15像素，內邊距左右10像素。 */p{                            /*定義段落文本的樣式*/background:#c1d5ff;border:1px dashed #93b7ff;margin:15px;padding:0px 10px; }/* 淺藍色背景，藍色虛線邊框，外邊距15像素，內邊距左右10像素。 */</style></head> <body><div class="father"><div class="box01">box01</div><div class="box02">box02</div><div class="box03">box03</div><p>在山東煙臺，全球最大的海上鉆井平臺“藍鯨2號”備受矚目。這個海上“巨無霸”有37層樓高，其甲板有一個足球場那么大。它可以在水深超過3000米的海域作業，最大鉆井深度15240米。“藍鯨2號”生產經理程騁剛來這里時，大部分人都是洋面孔，如今絕大部分工作人員都是中國面孔，程聘感覺“有一股強大的中國力量在引領海工行業的發展”。</p></div>
</body>

效果展示

未加float屬性時

加float屬性、未清除浮動影響

清除浮動影響

注意：clear屬性只能清除元素左右兩側的影響，由于父元素與子元素為嵌套關系，不存在左右位置關系，因此不能使用clear清除子元素浮動對父元素的影響

清除浮動的其他方法?

1、使用空標簽清除浮動影響

在需要清除浮動的父元素內部的所有浮動元素之后，添加一個空的塊級元素（如<div>），并為其設置clear: both樣式。例如：
<div class="container"><div class="float-left">Left</div><div class="float-right">Right</div><div style="clear: both;"></div>
</div>
原理

通過添加一個空的塊級元素并設置clear: both，可以清除前面所有浮動元素的影響，使父元素能夠正確包含這些浮動的子元素，從而恢復父元素的高度，并避免對后續元素的布局產生影響。工作中不建議使用，因為會增加無意義的元素結構。

2、使用overflow屬性清除浮動

為父元素設置“overflow:hidden”樣式，這個方法可彌補法一的不足

3、使用偽元素清除浮動影響

通過給父元素添加偽元素（如::after），并在偽元素上應用clear: both來清除浮動。
.father::after {content: "";display: table;clear: both;
}
原理

偽元素：::after 是 CSS 中的一個偽元素，用于在元素內容的后面插入生成的內容。在這里，我們使用它來創建一個空的虛擬元素。

content: ""：為偽元素提供內容，這里是空字符串，表示生成一個空的虛擬元素。

display: table：將偽元素設置為表格顯示，這樣它可以像表格一樣在布局中占據空間。

clear: both：清除前面所有浮動元素的影響，使父元素能夠正確包含這些浮動的子元素。

<title>使用空標簽清除浮動</title>
<style type="text/css">
.father{                              /*沒有給父元素定義高度*/background:#ccc; border:1px dashed #999; /* overflow: hidden; */
}
/* 淺灰色背景和虛線邊框的容器。 */
.box01,.box02,.box03{ height:50px; line-height:50px; background:#f9c; border:1px dashed #999; margin:15px; padding:0px 10px; float:left;                     /* 定義box01、box02、box03三個盒子左浮動*/
}
/* 三個高度為50像素的盒子，背景為淺橙色，帶有虛線邊框，水平排列在父元素內部。 */
/*.box04{ clear:both;}                 對空標簽應用clear:both;*/
</style>
</head> 
<body>
<div class="father"><div class="box01">box01</div><div class="box02">box02</div><div class="box03">box03</div><!-- <div class="box04"></div>        在浮動元素后添加空標簽-->
</div>
</body>

?效果展示

未設置清除浮動時

設置清除浮動時

overflow屬性?

<title>overflow屬性</title>
<style type="text/css">
div{width:260px;       height:176px;       background-image: linear-gradient(30deg,#0f0 50%,#ccc 70%,red 80%);overflow:scroll;    /*溢出內容呈現在標簽框之外*/ }
</style>
</head>
<body>
<div>當田野染上一層金黃，各種各樣的果實搖著鈴鐺的時候，雨，似乎也像出嫁生了孩子的婦人，顯得端莊而又沉靜了。這時候，雨不大出門。田野上幾乎總是金黃的太陽。也許，人們都忘記了雨。成熟的莊稼等待收割，金燦燦的種子需要曬干，甚至紅透了的山果也希望最后的曬甜。忽然，在一個夜晚，窗玻璃上發出了響聲，那是雨，是使人靜謐、使人懷想、使人動情的秋雨啊！天空是暗的，但雨卻閃著光；田野是靜的，但雨在傾訴著。頓時，你會產生一脈悠遠的情思。也許，在人們勞累了一個春夏，收獲已經在大門口的時候，多么需要安靜和沉思啊！雨變得更輕，也更深情了，水聲在屋檐下，水花在窗玻璃上，會陪伴著你的夜夢。如果你懷著那種快樂感的話，那白天的秋雨也不會使人厭煩。你只會感到更高邈、深遠，并讓凄冷的雨滴，去純凈你的靈魂，而且一定會遙望到一場秋雨后將出現的一個更凈美、開闊的大地。
</div>
</body>

?效果展示

1、使用scroll屬性值

2、使用auto屬性值

3、使用hidden屬性值

4、使用visible屬性值（默認值）

二、元素的定位?

靜態定位（static）——默認的擺放方式
就像你把書本自然擺放在書架上，所有書按順序排列。這是瀏覽器默認的排列方式，元素會按照HTML代碼的先后順序自然堆疊，不能通過top/left等屬性調整位置。

相對定位（relative）——微調位置
好比你在墻上貼了一張便簽紙，之后覺得位置不夠好，可以上下左右移動幾厘米。元素會保留原本的位置空間，移動時不會影響其他元素：

絕對定位（absolute）——精確坐標定位
像把照片用圖釘固定在墻上的某個精確位置。元素會脫離正常文檔流，根據最近的已定位祖先元素（非static）進行定位：

固定定位（fixed）——廣告牌式定位
就像馬路邊的廣告牌，無論你開車走多遠它都固定在同一個位置。元素會固定在瀏覽器窗口的某個位置，不隨頁面滾動移動：

?1、相對定位

<style type="text/css">
body{ margin:0px; padding:0px; font-size:18px; font-weight:bold;}
.father{margin:10px auto;width:300px;height:300px;padding:10px;background:#ccc;border:1px solid #000;
}
.child01,.child02,.child03{width:100px;height:50px;line-height:50px;background:#ff0;border:1px solid #000;margin:10px 0px;text-align:center;
}
/* .child02{position:absolute;         /*絕對定位*/left:150px;                 /*距左邊線150px*/top:100px;                  /*距頂部邊線100px*/
} */</style>
</head>
<body>
<div class="father"><div class="child01">child-01</div><div class="child02">child-02</div><div class="child03">child-03</div>
</div>
</body>

效果展示

未設置相對定位時

設置相對定位時——/* child02相對于頁面窗口左邊線150像素，上邊界100像素*/

2、絕對定位?

<title>子元素依據其父元素進行定位</title>
<style type="text/css">
body{ margin:0px; padding:0px; font-size:18px; font-weight:bold;}
.father{margin:10px auto;width:300px;height:300px;padding:10px;background:#ccc;border:1px solid #000;position:relative;          /*相對定位，但不設置偏移量*/
}
.child01,.child02,.child03{width:100px;height:50px;line-height:50px;background:#ff0;border:1px solid #000;border-radius:50px;margin:10px 0px;text-align:center;
}
/* .child02{position:absolute;         /*絕對定位*/left:150px;                /*距左邊線150px*/top:100px;                 /*距頂部邊線100px*/
} */
</style>
</head>
<body>
<div class="father"><div class="child01">child-01</div><div class="child02">child-02</div><div class="child03">child-03</div>
</div>
</body>

?效果展示

未設置相對定位時

設置相對定位時——/* 相對于父元素左邊線150像素定邊線100像素*/

?3、固定定位

<style type="text/css">
body{ margin:0px; padding:0px; font-size:18px; font-weight:bold;}
.father{margin:10px auto;width:300px;height:300px;padding:10px;background:#ccc;border:1px solid #000;position:relative;          /*相對定位，但不設置偏移量*/
}
.child01,.child02,.child03{width:100px;height:50px;line-height:50px;background:#ff0;border:1px solid #000;border-radius:50px;margin:10px 0px;text-align:center;
}
.child02{position:fixed;         /*固定定位*/left:150px;                /*距左邊線150px*/top:100px;                 /*距頂部邊線100px*/
}
/* 不管窗口大小如何變化，該元素始終顯示在瀏覽器窗口的固定位置 */
/* 相對于父元素左邊線150像素定邊線100像素*/
</style>
</head>
<body>
<div class="father"><div class="child01">child-01</div><div class="child02">child-02</div><div class="child03">child-03</div>
</div>
</body>

效果展示?

未縮小窗口

縮小窗口——/* 不管窗口大小如何變化，該元素始終顯示在瀏覽器窗口的固定位置 */

z-index層疊等級屬性

z-index 就像給元素發「樓層號」

想象你在桌上疊放幾張紙：

默認情況：后放的紙蓋住先放的（HTML中后寫的元素會覆蓋先寫的）

發樓層號：給每張紙寫一個數字（z-index值），數字越大樓層越高，就能壓住數字小的紙

關鍵規則：

只對定位元素有效（設置了?position: relative/absolute/fixed?的元素）

數值越大越靠前（z-index: 2 > z-index: 1）

負數會沉到默認層下方（可用于隱藏元素）

同層級比較：若父元素層級低，子元素z-index再高也逃不出這棟"樓"

常見用法：

彈窗覆蓋其他內容 → 給彈窗設置高z-index（如9999）

導航欄懸浮 → z-index: 100

輪播圖的切換按鈕 → 確保按鈕在圖片上層

避坑提醒：

像電梯按鈕，z-index只在同個「電梯井」（層疊上下文）內比較

如果父元素有z-index，子元素只能在父元素的「樓層」內調整高低

<title>子元素依據其父元素進行定位</title>
<style type="text/css">
body{ margin:0px; padding:0px; font-size:18px; font-weight:bold;}
.father{margin:10px auto;width:300px;height:300px;padding:10px;background:#ccc;border:1px solid #000;position:relative;          /*相對定位，但不設置偏移量*/z-index: 1;
}
.child01,.child02,.child03{width:100px;height:50px;line-height:50px;background:#ff0;border:1px solid #000;border-radius:50px;margin:10px 0px;text-align:center;
}
.child02{position:fixed;         /*固定定位*/left:150px;                /*距左邊線150px*/top:100px;                 /*距頂部邊線100px*//* z-index: -1; */
}
/* 不管窗口大小如何變化，該元素始終顯示在瀏覽器窗口的固定位置 */
/* 相對于父元素左邊線150像素定邊線100像素*/
</style>
</head>
<body>
<div class="father"><div class="child01">child-01</div><div class="child02">child-02</div><div class="child03">child-03</div>
</div>
</body>

效果展示

默認z-index時