CSS 排版方式（Float / Inline-block / Flex）間的差異及注意事項

在現代網頁開發中，布局方式隨著技術的進步不斷演變。從早期的 float 、 inline-block 到現在主流的 flex 和 grid，每種技術都有其歷史背景和用途。以下是這三種布局技術的使用情況及其現代網頁開發中的使用率：

Float

1. 用途：

主要用於文字與圖片的混合排版，實現圖片浮動，讓文本環繞。
可以用來實現簡單的兩欄或三欄佈局。

2. 優點：

*float 最早被用於讓文字環繞圖片的布局需求，但後來逐漸被用來實現簡單的網頁布局。

與文字排版、環繞效果結合非常好，簡單、兼容性好，支持所有主流瀏覽器。

3. 缺點：

*使用 float 來做整體布局容易產生不易預測的副作用，譬如因為高度消失，所以會有「塌陷」或「溢排」問題，因此需要清除浮動。

佈局不直觀，需要清除浮動（clearfix）來避免父容器高度塌陷的問題。
控制子元素對齊和比例不靈活，維護困難。
在現代網頁設計中已逐漸被更高效的佈局方式取代，隨著更專門的布局工具如 flexbox 和 grid 的出現，float 的使用逐漸減少。

4. 清除float浮動的方式（Clearfix Hack）：

🌟🌟🌟 （最推薦）方式 1：使用 clearfix::after 偽元素
最常見的 clearfix 實現是通過 ::after 偽元素來清除浮動，並觸發父元素的「區塊格式化上下文」（Block Formatting Context, BFC），這樣父元素就能正確包含浮動元素，並且廣泛用於處理浮動布局的問題。這個技巧可以使父元素自動包含浮動子元素，並且不需要修改 Html 結構，是一種優雅且簡單的解決方案。

實現方式如下：


  .box{
      float: left;
      width: 100px;
      height: 100px;
  }
  .box-1{
      background: red;
  }

  .box-2{
      background: blue;
  }

  .clearfix::after {
    /* 1. 新增 ::after */
    content: ''; /* 2. 新增 content，注意需要加上 '' */
    display: block; /* 3. 新增 display，也可以用 table */
    clear: both;
  }

  <!-- Html -->
  <div class="container clearfix">
      <div class="box box1">Box 1</div>
      <div class="box box2">Box 2</div>
  </div>

方式 2：父容器設置 overflow 屬性
當設置 overflow: hidden; 時，父容器會觸發 BFC，從而自動擴展以包裹浮動的子元素。

這種方式簡單有效，且不需要額外的 DOM 元素，但會有一些限制，例如無法顯示溢出的內容（除非用 overflow: auto; 或 scroll;）。

overflow: hidden;子元素內容超出父容器時;使用該屬性會將多出的內容隱藏。
overflow: auto;父容器根據子元素的內容進行擴展但不截斷溢出的內容，可以使用 overflow: auto;。

實現方式如下：

    /* CSS 樣式 */
    .container{
        overflow:hidden;
    }

    <!-- Html --> 
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>

方式 3：
總結：其實都是 clear: both 的延伸。
看完了三種 clearfix 的方式後，有沒有發現這三種方法，原理其實都是利用了 clear: both 而已，只是為了讓使用上更便利，因此產生了各種 clearfix 的解方。

以上三種方式而言，個人推薦 方法1：透過 .clear::after 來處理

     /* CSS 樣式 */
     .clearfix{
          clear:both;
      }

  <!-- Html --> 
  <div class="wrap">
    <div class="box box-1">Box 1</div>
    <div class="box box-2">Box 2</div>

   <div class="clearfix"></div>
    <!--新增用來清除上面的浮動-->

Inline-block

1.用途：

適合水平排列多個塊級元素，例如多個按鈕或圖片的排列。
用來代替 float 來實現簡單的水平佈局，不需要清除浮動。
用於小型的 inline 布局，或某些需要特殊處理的元素，但隨著 flex 和 grid 更為靈活，這種方式的使用在整體布局中不再佔主流。

2.優點：

子元素保持塊級特性（可以設置寬高），但行內排列。
實現多列佈局比 float 更直觀，不需要清理浮動。

3.缺點：

inline-block 元素會像行內元素一樣，元素之間會產生不必要的空格，這是因為 Html 中的換行或空格被瀏覽器渲染出來。
元素之間會有默認的空白間距，這是由於行內元素的特性造成的，處理這個空白較麻煩（可以通過設定字體大小為 0 等方法解決）。
*對複雜佈局支持較弱，靈活性不如 flex。

4. 清除inline-block產生的空白間距問題：

🌟🌟🌟 （最推薦）方式 1：父元素設置 font-size: 0
將 inline-block 父元素的 font-size 設置為 0，可以讓空格不會被渲染，這種方式需要在子元素中重新設定字體大小，因為父元素的 font-size 被設為 0。

實現方式如下：

    <!-- Html -->
    <div class="main_box">
      <div class="sub_box">框 1</div>
      <div class="sub_box">框 1</div>
    </div>

  /* css樣式 */
  .main_box{
      font-size:0;  /* 消除間距 */
  }
  .sub_box{
      display:inline-block;
      font-size:16px; /* 或1em， 因為父層為了消除間距，將 .main_box 設置 font-size:0;，故這裡會需要將字級恢復 */
  }

方式 2：刪除元素之間的空格
可以通過刪除 inline-block 元素之間的換行或空格來移除間距。不過這個方式較不建議，大多時候會因為每個人編寫的習慣不同，會將版面做編排，版面排版的不確定因素太大。

實現方式如下：

    <!-- Html -->
    <div class="main_box">
      <div class="sub_box">框 1</div><div class="sub_box">框 2</div>
    </div>

  /* css樣式 */
  .sub_box{
      display:inline-block;
  }

Flex

1. 用途：

適合彈性、動態的佈局需求，能夠非常輕鬆地排列水平或垂直方向的元素。
可以用來處理各種複雜的佈局需求，尤其是動態的、跨瀏覽器的自適應佈局。

2. 優點：

非常靈活，支持容器內的元素自適應尺寸和位置，適合響應式設計。
可以輕鬆控制元素的對齊、排序、方向（水平或垂直）。
支持均勻分佈空間，元素之間無空白間隙問題。

3. 缺點：

僅適合處理一維佈局（單行或單列），對於二維佈局需結合 grid。
較新的技術，舊版瀏覽器的兼容性可能不佳（但現在已經普遍支持）。

總結比較

特性	Float	🌟Inline-block	🌟🌟Flex
靈活性	低	中	高
用途	圖文混排、簡單欄式佈局	水平排列多個塊級元素	一維彈性佈局（水平或垂直）
易用性	需要清除浮動，較麻煩	排列簡單但有空白間隙	非常直觀，對齊和排列控制靈
響應式支援	需手動調整寬度或整體比例	基本支持	原生支持，適合響應式設計
兼容性	非常好，支持所有瀏覽器	良好	現代瀏覽器支援良好（太舊瀏覽器不支援）
應用場景	圖片浮動與文字排版，兩欄佈局	水平排列按鈕或圖片	靈活的垂直/水平居中佈局，自適應佈局
使用率	低，逐漸被替代	中等，仍在一些簡單佈局中使用	高，現代網頁設計中最常見