在使用 CSS float 屬性進行排版時，一個常見但容易忽略的問題是：當浮動元素前面有其他元素時，浮動元素可能不會出現在預期的位置，而是被擠到下一行。 float 的基本行為 float 屬性讓元素脫離正常文件流（Normal Flow），使其向左或向右浮動，而後續的行內內容（文字、inline 元素）會環繞在浮動元素旁邊。 1 2 3 4 .float-box { float: left; width: 200px; } 前面有 Block 元素時的問題 當浮動元素前面有一個 display: block 的元素時，block 元素會佔據整行，導致浮動元素從新的一行開始浮動： 1 2 3 <div class="block-element">我是 Block 元素，佔滿整行</div> <div class="float-box">我想浮到左邊</div> <div class="float-box">我也想浮到左邊</div> 1 2 3 4 5 6 7 8 9 10 11 12 .block-element { /* display: block 是預設值，佔滿整行 */ background: #eee; padding: 10px; } .float-box { float: left; width: 150px; height: 100px; background: #ccc; margin: 5px; } 由於 .

vertical-align 是 CSS 中用來控制行內（inline）或表格單元格（table-cell）內容垂直對齊的屬性。它常常讓人感到困惑，尤其是搭配 inline-block 使用時。 vertical-align 的適用範圍 重要：vertical-align 只對以下元素有效： display: inline 的元素 display: inline-block 的元素 display: table-cell 的元素 對 block 或 flex 元素無效。 常見的值 1 2 3 4 5 6 7 8 9 10 .element { vertical-align: baseline; /* 預設值：對齊父元素的文字基線 */ vertical-align: top; /* 對齊行盒（line box）的頂部 */ vertical-align: middle; /* 對齊父元素的中線 */ vertical-align: bottom; /* 對齊行盒的底部 */ vertical-align: text-top; /* 對齊父元素文字的頂部 */ vertical-align: text-bottom; /* 對齊父元素文字的底部 */ vertical-align: 10px; /* 以像素為單位，向上偏移 */ vertical-align: -5px; /* 向下偏移 */ } inline-block 元素出現神秘空白縫隙 這是最常踩到的雷。多個 inline-block 元素之間會出現空白間距，原因是 HTML 中元素之間的空白字元（換行、空格）也算作行內文字。

在早期 CSS 排版中，float 是最常見的水平排列方式。但當你在 flex container 內的子元素使用 float 時，會發現完全沒有作用——這是 CSS 規範的設計，並非 bug。 為什麼 float 在 flex 內失效？ 根據 CSS 規範，flex 子元素（flex items）會自動忽略 float 屬性。當一個元素的父層設定了 display: flex，子元素無論設定 float: left 或 float: right 都不會有任何效果，因為 flex 格式化上下文（flex formatting context）會覆蓋掉浮動行為。 1 2 3 4 5 6 7 8 .container { display: flex; } .item { float: left; /* 完全無效，會被忽略 */ width: 100px; } 使用 Flex 取代 Float 排版 Flexbox 本身就提供了比 float 更強大且直觀的水平排列能力，不需要再依賴 float。 水平排列（取代 float left） 1 2 3 4 5 .

曾經看過一個文
他說php本身就是樣版引擎
不需要特別載入

之前有用過twig簡單的樣版引擎
CoeIgniter本身就是用php
當然也可以使用自己最愛用的