🔎這裡是【前端網頁】，關注我學習前端不迷路
👍如果對你有幫助，給部落客一個免費的點贊以示鼓勵
歡迎各位🔎點贊👍評論收藏⭐️
👀專欄介紹
【前端網頁】 目前主要更新HTML，一起學習一起進步。
👀本期介紹
本期主要介紹CSS的三大特性層疊性、繼承性、優先級
文章目錄
1. 引言&概述
2. 基本布局：标準流
3. 常用布局：浮動
3.1 引入
3.2 概述及格式
3.3 浮動案例
3.3.1 準備代碼
3.3.2 案例 1：左對齊順序排列
3.3.3 案例 2：右對齊順序排列
3.3.4 案例 3：兩端對齊排列
3.3.5 課堂練習：兩端對齊排列
3.4 浮動特點及注意事項
3.5 浮動總結
4. 清除浮動
4.1 準備代碼
4.2 引言
4.3 概念&格式
4.4 額外标簽法 (隔牆法)
4.5 單僞元素法
4.6 雙僞元素法
4.7 overflow:超出隐藏法
4.8 總結
5. 布局總結
1. 引言&概述
網頁布局的本質：
使用
CSS
盒子模型來進行調整和定位。
布局的常見方式：
标準流（普通流）
浮動
定位
今天的講義中，我們先講解标準流 和 浮動。
2. 基本布局：标準流
标準流布局：标簽按照預設方式排列，是布局中最基本的方式。
我們前面學習的所有布局調整，全部都是标準流布局。
例如：
div 是标準 塊級元素，獨占一行，多個
div
從上到下順序排列。
例如：
span 是标準 行内元素，從左到右依次排序，若一行的行内元素過多，多與的行内元素觸碰到父元素邊框會換行。
3. 常用布局：浮動
3.1 引入
通常我們有這樣的布局需求：div 進行一行的順序布局、或 div 進行一行的兩端布局
除了可以使用我們之前學過的顯示模式轉換 display 進行調節，我們還可以使用 浮動 布局來完成以上效果。
3.2 概述及格式
浮動布局：讓元素脫離标準流進行“漂浮”的布局方式，可以改變元素預設的排列方式。
多用于讓塊元素橫向排列的需求。
格式：
選擇器 {
float:
屬性值
;
}
常用屬性值：
none
：元素不浮動（預設值）
left
：元素向左浮動
right
：元素向右浮動
下面我們使用多個課堂案例，來認識浮動。
3.3 浮動案例
3.3.1 準備代碼
3.3.2 案例 1：左對齊順序排列
示例 1：要求在一行上，左對齊：
注意：因為從上到下執行代碼，紅色方塊是第一個向左浮動的，自然在最左邊
3.3.3 案例 2：右對齊順序排列
示例 2：要求在一行上，右對齊：
注意：因為從上到下執行代碼，紅色方塊是第一個向右浮動的，自然在最右邊
3.3.4 案例 3：兩端對齊排列
示例 3：要求在一行上，進行如下兩端對齊：
注意：因為從上到下執行代碼，綠色方塊是第一個向右浮動的，自然在最右邊
3.3.5 課堂練習：兩端對齊排列
準備代碼：
要求的效果：
提示：
左浮動：先紅後藍
右浮動：先綠後黃
答案：
3.4 浮動特點及注意事項
1、相較于标準流元素，元素設定浮動，會對下方标準流産生影響，不影響上方标準流。
2、相鄰浮動元素之間預設貼合（除非主動設定 margin），若浮動元素觸碰到父元素邊框，會自
行換行。
3 、 任何元素均可浮動
，
設定浮動後，元素的特性與 行内塊元素相似
（寬度可設定、預設由内容決
定、觸
碰父元素邊緣自動換行）
3.5 浮動總結
浮動和标準流一般搭配使用：
步驟： 1 、标準流作父元素，用于排列垂直位置
2 、浮動元素在标準流父元素内，用于排列水準位置
4. 清除浮動
4.1 準備代碼
4.2 引言
通常情況下，未設定高度的 标準流父元素，在子元素進行浮動時，會導緻父元素失去子元素，高
度消失。
進而影響頁面排版。
該問題的解決方案有多種，常見兩種快速解決方案：
1
、
父元素也設定浮動
（可能會影響其他垂直排版）
2
、 清除子元素的浮動效果，讓浮動狀态的子元素影響标準流
注：有同學可能會使用 float
:
none
;
或者 删除
float
代碼，這确實可以清除浮動效果。
除此之外，在開發中，我們還有多種規範化的清除浮動的代碼，下面讓我們來一起學習。
4.3 概念&格式
清除浮動：清除兄弟元素帶來的浮動影響。
格式： clear
:
屬性值
;
準備代碼：
預設效果：
常見屬性值：（為綠色塊設定清除浮動）
注意：clear 不會清除元素自身的浮動狀态，僅會清除該元素左側或右側的浮動效果。
總結：一般我們使用 clear:both；這樣就不用再區分我們是 左浮動還是右浮動，直接清空兩端浮動
效果。
問題引出：
單一使用 clear ： both 雖然能清除元素左右的浮動效果，但是仍然無法解決
是以下面我們來介紹一些結合了 clear:both 的綜合方式來解決以上問題。
4.4 額外标簽法 (隔牆法)
額外标簽法：通過添加一個 clear 樣式的額外标簽來清除浮動效果。
一般在父元素末尾添加一個空标簽： < div
style
="
clear
:
both"
></
div
>
注意：一般使用塊級元素 div ， p 标簽也能達到對應效果
示例代碼：
示例效果：
分析：
注意：
浮動元素仍然是浮動狀态 ，僅因為額外标簽，使得影子在額外标簽的父元素中生效。
浮動元素僅有一個“影子”，
“影子”僅被生效一次 。（多次添加額外标簽，作用于某個浮動元素，該浮
動元素的“影子”也僅生效一次）
總結：額外标簽法在開發中會遇到
4.5 單僞元素法
單僞元素法：為标準流的父元素添加僞元素 :after ，利用 :after 模拟生成額外标簽，來清除浮動。
（是額外标簽法的另一種寫法）
文法：
示例代碼：
示例效果及分析：
總結：用法較額外标簽法複雜，而且要照顧低版本浏覽器。
但因為不會添加額外标簽，很多美勞工員用僞元素可以應對需求反複的修改，是以會見到其他人的代碼中使用
擴充：特殊條件下，當僞元素生成的内容有高度、且内容被顯示影響版式時，我們會多加入兩個屬
性：
文法：
visibility
:
hidden
; 隐藏元素，但是需要在頁面占用位置。
（相當于有一個披了隐身衣的隐身人，占着地方，卻看不見他）
一般用不上，因為僞元素 :after 在 content 為空時，預設生成的就是高度為 0 ，看不見的元素。
4.6 雙僞元素法
雙僞元素法：為标準流的父元素添加僞元素 :before 和 :after ，利用 :before 和 :after 模拟生成額外标簽，來清除浮動。
（是額外标簽法的另一種寫法）
文法：
示例代碼：
示例效果及分析：
總結：用法較額外标簽法和單僞元素法更複雜，而且要照顧低版本浏覽器。但會見到其他人的代碼中使用
但因為不會添加額外标簽，很多美勞工員用僞元素可以應對需求反複的修改，是以會見到其他人的代碼中使用
4.7 overflow:超出隐藏法
overflow: 用于設定溢出元素部分的政策。（兼顧清除浮動的妙用）
格式： overflow
:
屬性值
;
屬性值清單（後面課程會詳細介紹其他屬性值）
總結：清除浮動的代碼雖然簡潔，但是容易被上方的浮動元素影響，且無法顯示出溢出部分，若對
内容不溢出 沒有十足把握，不建議用此來清除浮動。
4.8 總結
未設定高度的 标準流父元素，在子元素進行浮動時，會導緻父元素失去子元素，高度消失。
這時我們可以采取清除浮動來讓布局可控。
5. 布局總結
網頁布局中，行内元素 尤其是行内塊元素，在布局上，無論垂直還是水準都容易操作。
塊元素布局上需要采取對應政策：
豎向排列
使用：
标準流
橫向排列
使用：
浮動
疊加排列
使用：
定位