4- 版面配置 ~ CSS 的佈局模式

CSS 佈局模式

CSS 佈局模式

話說很久很久以前，有多久? 我已經忘記了，網頁開發者、 都習慣使用頁框 frame 和表格 table 來分割版面，之後常見有5種佈局模式。

• block
• inline
• table
• float
• positioned

現在 CSS 3 又有了兩種新的佈局方式 Flexbox 和 Grid， 可用來取代 float 和 table mode

彈性盒子 Flexbox 會根據單一的行或列分配空間, 類似 float 調配控制元素的位置尺寸概念, 但更靈活好用!

格線 Grid 將佈局區分成 rows 和 columns, 有點類似 table 但比其更具有彈性。

關於 float 屬性

本質上 float 並不是用來協助我們佈局的, 它只是一個舊有的對齊屬性，跟表格(table)和圖像(img)的 Align屬性一樣，可用來實現文繞圖

<div id="block" height="100px"> <span style="float:left;">
浮貼左邊對齊
22222
</span>

表格	ALIGN="left"
	000	表格的左、右邊對齊 非浮動對齊 Float 效果卻和浮貼一樣 會紅杏出牆

<img style="float:right;">
由此範例可看出 ~ 這個浮動對齊的圖片，吃不飽時就劈腿， 溢出到了容器外面！ </div>

在使用 float 的時候經常會遇到一個奇怪且糟糕的事： 當被設定為浮動元素，其高度比包含它的父層容器還高時，就會劈腿出軌， 有個賤招 clearfix 密技（hack）可以解決這個問題，就是在父元素 #block 加入 overflow: auto; 或 overflow:hidden; 屬性。

#block {
overflow: auto;

}

加了 overflow 屬性之後，浮動元素(圖像)就不會再翻牆了。

這個清除浮動的賤招，有數個問題要注意:

#block 父元素的高度不可以是固定的高度，還有 position 絕對定位元素和浮動元素重疊，會出現捲軸滑軌，還有鄰居的外邊距對它無效， 要保持距離，要由浮動元素來決定。

另一個清除浮動定位 clear 屬性

當我們使用 float 元素排版時，由於區塊是浮動的，所以若下一個區塊未使用 float 屬性的話，可能在排版上會往上跑，造成跑版的現象，而使用 clear 可以適當地解決這個問題。

比較一下、以下的例子

-- CSS--
.theDiv{
width:400px;
border:1px solid black;
}
.nav{
background:rgba(220, 220, 100, 0.3);
border:1px solid blue;
width:100px;
float:left;
}
.par1{
background:rgba(100, 210, 220, 0.3);
border:1px solid red;
margin-left: 20px;
}
.par2{
background:rgba(250, 200, 200, 0.3);
border:1px solid orange;
margin-left: 20px;
width:150px;
}

• 項目一
• 項目二
• 項目三

段落 一 ❤️❤️❤️ ❤️❤️❤

段落 二 ♠️♠♠️ ♠♠️♠

在清單元素<ul class="nav">上套用了Float屬性，元素會浮動到左邊， 可是並不會將空間完全釋放出來，段落 二設定了寬度 width:150px，因此內容被擠到下面

--- HTML ---
<div class="theDiv">
<ul class="nav">
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>
<p class="par1">段落 一 ❤️❤️❤️ ❤️❤️❤</p>
<p class="par2">段落 二 ♠️♠♠️ ♠♠️♠ </p>
</div>

• 項目一
• 項目二
• 項目三

段落 一 ❤️❤️❤️ ❤️❤️❤

段落 二 ♠️♠♠️ ♠♠️♠

段落 二 不設定寬度，就變這樣子

若在 "段落 二" 加上clear屬性，clear:both 或 clear:left， 就可以擺脫 Float 浮動元素的糾纏，自成一行

• 項目一
• 項目二
• 項目三

段落 一 ❤️❤️❤️ ❤️❤️❤

段落 二 ♠️♠♠️ ♠♠️♠

使用 float 配置版面

使用 float 來實現頁面的版面配置是很常見的。
下面是一個將側欄 Aside 設定為靠右浮動的典型例子 ~

 HTML 

<div>
<header><img ....> </header>
<aside> Aside </aside>
<article class="art"> article-1 .... </article>
<article class="art"> article-2 .... </article>
<footer> Footer </footer>
</div>

Aside

• 項目一
• 項目二
• 項目三

article-1
一定要找機會去一個完全沒有人認識你、在乎你、要求你的地方。沒有人認識你，是你開始認識你自己的最佳時候；沒有人在乎你，是你開始照看自己的最好機會；沒有人要求你，你才擁有空間審視自己的真實需求。

article-2
提筆思念，落筆無言。爐中的香，讓它消散吧，桌上的茶，隨它漸涼。知道你還在張望，就足夠溫暖。

Footer

aside {
float: right;
width:200px;
}
.art {
margin-right:200px;
}
footer {
clear:both;
}

靠右浮動側欄 Aside 的寬度為200px，為了不要和側欄疊在一起， article 設定預留了 200px 的外間距空間。
當浮動側欄 Aside 的高度，比 article 這些「固定」的內容還要高時就會紅杏出牆，為了防止劈腿出軌，footer 加上清除浮動定位屬性 clear:both;。