知識目標
- 掌握標準文檔流的解析規則
- 掌握元素的顯示模式
- 掌握元素浮動屬性語法與使用
- 掌握浮動塌陷解決方法
1. 標準文檔流
2. 元素顯示模式
元素顯示模式就是元素（標簽）以什么方式進行顯示，比如<div>獨占一行，一行可以放多個<span>。HTML元素一般分為塊元素和行內元素兩種類型。
2.1 塊狀元素
常見的塊狀元素
<div>、<p>、<h1> - <h6>、<ul>、<ol>、<li>、<form> 等。
特點：
- 獨占一行：塊狀元素在頁面中會獨自占據一行空間，無論其內容多少，后續元素會自動換行顯示。
- 可設置寬度和高度：能夠通過 CSS 的 width 和 height屬性來明確指定其寬度和高度。若未設置寬度，默認會占據父元素的全部寬度。
- 可設置內外邊距：可以使用 padding（內邊距）和 margin（外邊距）屬性來調整元素與內容、其他元素之間的距離。
- 寬度默認是容器（父級寬度）的100%。
- 是一個容器/盒子，里面可以放行內或者塊級元素。
注意：
- 文字類的元素內不能包含塊級元素，如
<h1>~<h6>； <p>標簽主要用于存放文字，因此<p>里面不能放塊級元素，特別是不能放<div>；
2.2 行內元素
常見的行內元素
<a>、<img>、<input>、<label>、<select>、<textarea>、<span> 等。
特點：
- 不獨占一行：行內元素會在同一行內顯示，不會強制換行，多個行內元素可以并排顯示。
- 寬度和高度由內容決定：無法通過 CSS 的 width 和 height 屬性來設置其寬度和高度，其大小取決于元素內部的內容。
- 內外邊距設置受限：水平方向的 padding 和 margin 可以正常設置，但垂直方向的 padding 和 margin設置可能不會產生預期效果。
- 行內元素只能容納文本或其他行內元素。
注意：
- 鏈接里面不能再放鏈接
- 特殊情況鏈接
<a>里面可以放塊級元素，但是給<a>轉換一下塊級模式最安全。
2.3 行內塊元素
在行內元素中有幾個特殊的標簽——<img />、<input />、<td>， 它們同時具有塊元素和行內元素的特點。沒有專門的學名，只是有些資料稱它們們行內塊元素。
特點：
- 和相鄰內元素(行內塊)在一行上，但是他們之間會有空白縫隙，一行可以顯示多個(行內元素特點)。
- 默認寬度就是它本身內容的寬度(行內元素特點)。
- 高度、行高、外邊距以及內邊距都可以控制(塊級元素特點)。
2.4 顯示模式總結
2.5 顯示模式轉換-display屬性
question: 為什么要對元素進行轉換？
回答：網頁是由多個塊元素和行內元素構成的盒子排列而成的。如果希望行內元素具有塊元素的某些特性，例如可以設置寬高，或者需要塊元素具有行內元素的某些特性，例如不獨占一行排列，可以使用display屬性對元素的類型進行轉換。
3. 盒子浮動屬性語法與使用
3.1 float屬性
元素的浮動是指設置了浮動屬性的元素會脫離標準文檔流的控制，移動到其父元素中指定位置的過程。
設置浮動屬性的語法格式：選擇器{float:屬性值;}
常用屬性值：left 左浮動 right 右浮動 none 不浮動（默認值）
3.2 clear屬性
為什么要清除浮動？在網頁中，由于浮動元素不再占用原文檔流的位置，使用浮動時會影響后面相鄰的固定元素，這時，如果要避免浮動對其他元素的影響，就需要清除浮動。
清除浮動的語法格式： 選擇器{clear:屬性值;}
clear屬性只能清除元素左右兩側浮動的影響。然而在制作網頁時，經常會遇到一些特殊的浮動影響。
由于子元素和父元素為嵌套關系，不存在左右位置，所以使用clear屬性并不能清除子元素浮動對父元素的影響。
3.3 浮動塌陷解決辦法
3.3.1 浮動塌陷產生的原因
在正常的文檔流中，元素會按照從上到下、從左到右的順序依次排列，父元素的高度會根據子元素的高度自動調整。但當子元素設置了 float 屬性（如 float: left 或 float: right）后，子元素會脫離正常的文檔流，不再占據原有的空間，此時父元素就無法感知到子元素的高度，從而導致父元素的高度塌陷為 0。
如下案例：因子類浮動導致父類高度為0。
3.3.2 浮動塌陷解決方案
解決方案1： 給父元素設置固定的高度
解決方案2： 使用clear屬性創建空元素
在浮動元素的末尾添加一個空的塊級元素，并為其設置 clear: both 屬性，強制該元素在浮動元素之后顯示，從而撐開父元素的高度。該方法會多很多無用標簽。
解決方案3：使用BFC（塊級格式化上下文）
BFC 是一個獨立的渲染區域，規定了內部的塊級元素如何布局，并且與外部元素相互隔離。可以通過為父元素設置一些特定的 CSS 屬性來創建 BFC，從而使其包含浮動的子元素。此種方法代碼簡潔，但無法顯示溢出部分。常見的創建 BFC 的方式有：
- float 值為 left 或 right
- overflow 值不為 visible（如 overflow: auto 或 overflow: hidden）
- display 值為 inline-block、table-cell 等
.parent {border: 2px solid red;overflow: auto; /* 創建 BFC */
}
**解決方案4：**使用偽元素清除浮動
這是一種比較常用且推薦的方法，通過為父元素添加偽元素，并為偽元素設置 clear: both 屬性來清除浮動。沒有增加標簽，結構簡單。但是屬性CSS3特性。
.parent::after {content: "";display: block;clear: both;
}
)
)
