CSS # 2— Normal flow、float、定位(Position)、z-index
布局流 (Normal flow)
什麼是布局流？在瀏覽器上呈現流動的概念能引出元素，代表元素能像水流的方式在瀏覽器上呈現以水平的左向右排序與垂直向下排列來水渲染元素，所以那要如何呈現呢？沒錯就是 內聯元素(inline)、區塊元素(block)。
那我們來看看這兩個是什麼東西。
內聯元素(inline)
如果要以最簡單的說法，在 HTML 標籤元素中有兩個 inline 元素如果連在一起會在同一行並不會換行。它有個特性，在設定 CSS 樣式大小時，只有 margin-left 、 margin-right 、 padding-left 、 padding-right 可以設定。
在HTML 標籤元素中是符合 display 屬性為 inline 有 <a>、<span>、<b>、<i>、<img> 等等…。
如果要在頁面上呈現水平置中時，可以在父層 CSS 樣式設定 text-align : center 屬性。
區塊元素(block)
與 inline 的差異是有個 block 元素前後都有元素時都會換行。在設定 CSS 樣式並沒有像內聯元素(inline)的限制。
同上述的在 HTML 標籤元素中有符合 display 屬性為 block 有 <div>、 <p>、<h1>、<h2> 等等…。
如果要在頁面上呈現水平置中時，可以在父層 CSS 樣式設定 margin : 0 auto 屬性。
那來看看這兩個的差異 ：
如上圖，看到<span>與<div> 這兩個標籤元素，在這裡會發現 display 屬性為 inline 時會呈現出兩個相同 hello world 是連在一起的，反之 display 屬性為 block 會單獨一行。
display：inline-block
這又是什麼呢？有 inline 又有 block的特性嗎? 沒有錯，顧名思義就是外面是 內聯元素(inline) 特性裡面是 區塊元素(block) 特性。
在這裡會發現怎麼元素與元素之間會有空間呢？這是 HTML 中元素與元素之間的空白鍵，只要將元素中的空白鍵刪除就不會出現了。
<body><span>我是Content</span><span>我是Content</span></body>
再來看另個範例:
//***CSS***
.flex-container {
min-height: 400px;
max-height: 460px;
background-color: #163a59;
border: 3px solid #ff6600;
padding: 1rem;
margin: 2rem 0 0;
width: 600px;
}.flex-item {
display:inline-block;
height: 100px;
width: 100px;
color: #ffffff;
background-color: #ff6600;
margin: 3px;
font-size: 40px;
text-align: center;
}.flex-item:nth-child(1){
padding:30px;
}//***HTML***
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
.flex-item 是使用 display:inline-block ，那 inline-block 的特性是會以文字來做對齊的基準。所以當使用 .flex-item 第一個子元素設定 padding 內推時，會推移文字的位置，那 .flex-item 需要對齊文字所以視覺上造成推移的效果。
以上三種 display 屬性也可以在元素中自行設定這三種屬性。
浮動 (float)
float 是可以在版面上做文繞圖的呈現，說的更清楚點使用標籤元素的左右位置使鄰近的內聯元素(inline)環繞著它。
float 屬性值
- none : 代表標籤元素不使用浮動特性
- left : 表示將標籤元素浮動於父層容器的左邊
- right : 表示將標籤元素浮動於父層容器的右邊
如何定位
當元素浮動時，會跳離開 布局流 (Normal flow)的排列，然後依照設定 CSS 樣式使元素浮動於父層容器的邊框，或到碰另一個浮動的元素。那以下我們來將屬性值介紹如下。
float : none在圖片上並沒有套用浮動的效果
float : left向左浮動
我們會發現 <img> 圖片因 float 屬性向左浮動後產生對齊父層容器的左邊框與紅線位置，<p>元素會因 <img> 圖片設定了float 屬性擠壓到文字內容並縮短了寛度，呈現出文字圍繞在 float 元素邊緣，形成文繞圖的效果。
float : right向右浮動
同理的<img> 圖片因 float 屬性向右浮動後產生對齊父層容器的右邊框位置，<p>元素會因 <img> 圖片設定了float 屬性擠壓到文字內容並縮短了寛度，呈現出文字圍繞在 float 元素邊緣，形成文繞圖的效果。
使用 float 會發生的問題
在使用 float 屬性時會讓元素浮動，使得之後的元素如沒有此屬性時會被覆蓋。
如上圖，黃色區塊就是被覆蓋的區塊，那要如何解決此問題呢？此時可以使用 clear 屬性來清除，這樣就能清除浮動的效果，而後方的區塊不會被覆蓋。
clear 參數：
- none(預設值)
- left(清除左邊浮動)
- right(清除右邊浮動)
- both(清除兩邊浮動)
來試試清除左右浮動
float 屬性是用來文繞圖的效果，那如果要用來排版的話需認識 clear 屬性喔。
清除浮動 偽元素
//**CSS**
.box {
width: 100px;
height: 200px;
background-color: green;
float: left;
color: #fff;
}.info {
background-color: #007bff;
}//**HTML**
<div class="info">
<div class="box">123</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis doloribus delectus, sapiente vitae atque animi, sint velit accusantium corrupti unde cum? Blanditiis dolor a adipisci cumque! Magni aspernatur id deleniti?</p>
</div>
會發現子元素 box 超出父層。
.clearfix {
display: block;
content: "";
clear: both;
}
定位 (Position)
從字面上的意思是位置，它的用途用來定位元素的屬性，而會依照top、left、right、button 來決定元素位置。
定位 (Position) 參數 : static | relative | absolute | fixed |sticky
static 原始定位(預設值)
以此 static 來定位會依照 Normal flow 方式，就如上述 inline、block 的排序。
relative 相對定位
當我們將元素指定為 relative 相對定位時如定位歸零就會留在原來的基準位置上。
absolute 絕對定位
absolute 此屬性會以父層設定的 Position 屬性 relative 為定位，如果父層沒設定再往上祖父層尋找 Position 屬性直到最上層 body 為止。
fixed 固定定位
顧名思義就是 固定在某個位置上，與 absolute 不同的是 fixed 會以父層 body 為定位基準點。
sticky 黏性定位
它是結合了 relative 相對定位 與 fixed 固定定位 以上效果，此定位方式會呈現於在網頁滾動時才會看見。
如上圖中一開始<div>以自己基準位置為主，當<div>元素經由滾動後，如符合設定的基準時會黏至基準位置上。
z-index
z-index 它的用述是在做堆疊，什麼意思呢?在堆疊上能使用 absolute 絕對定位 的父層與子層的概念，那如果有兩個以上的元素需要堆疊呢！沒錯就是它，那我們來說明概念，在網頁元素是以二維空間的排列方式呈現，也就是利用 X 軸 與 Y 軸來排序元素的位置，即然要做到堆疊元素就要使用到上下層之間的關係，這時就是 Z 軸 而 z-index 就是負責這部份的樣式。
…
參考： float 、 Normal Flow 、Inline elements 、Block-level elements 、position 、z-index以上是我對 CSS # 2 — Normal flow、float、定位 (Position)、z-index 的學習筆記 😉。
***如果有任何想法，也歡迎留言與我分享~
***也謝謝你(妳)的閱讀，覺得有幫助的話別忘了順手拍個手喔！***
