【Live講堂】CSS排版大解析：CSS Float應用

CSS Float 是一種關鍵屬性，用於讓元素在其父元素的邊界內浮動，並使周邊元素環繞著它。 這個屬性最初是在 HTML 和 CSS 列表佈局中使用，但隨著 CSS 其他布局技術的出現，浮動的應用場景有所變化。

使用 float 屬性建立浮動。 使用 clear 和 display: flow-root 值清除浮動。 引入 float 屬性是為了讓 Web 開發者能夠實現一種佈局，即影像浮動在文字列中，文字環繞其左側或右側。 這就像報紙版面中常見的那種佈局。 但 Web 開發者很快意識到你可以浮動任何東西，而不僅僅是影像，因此浮動的使用範圍擴大了，例如，用於建立有趣的佈局效果，如 首字下沉。 浮動曾常用於建立整個網站佈局，其中包含多列資訊浮動在一起（預設行為是列會按照它們在原始碼中出現的順序堆疊在彼此下方）。 現

浮動元素 ( float ) 一直都是網頁排版的主要技巧，這篇教學除了會介紹 float 屬性的語法，也會深入探討浮動元素和 inline 元素與 block 元素在排版的互動或換行情況，以及 clear 清除浮動的屬性語法。

然而，在它們普及之前，CSS 的 float（浮動）屬性扮演了網頁佈局的基石角色。 float 最初的設計目標是為了實現文字環繞圖片image的「文繞圖」效果，如同報紙或雜誌的排版。

瞭解如何使用 CSS 建立響應式浮動元素。 提示： 在我們的 CSS 浮動 教程中瞭解更多關於浮動的資訊。 跟蹤您的進度 - 免費！

基本語法中的浮動參數有 left、right 以及 none，『float:left;』代表向左浮動，『float:right;』代表像右浮動，而『float:none;』則代表元素不要浮動，在 DIV 區域使用 float 技巧，通常還會搭配 DIV 的寬度，來達成每個 DIV 正確排列的效果。