[CSS] 浮動(float) 與清除浮動(clear)

首先來理解 clear 屬性，當一個元素中的CSS 有 clear 屬性時，就會「 清除該元素上方所遭遇的浮動情況」，因此就不會忽略其上方的元素高度，進而回到垂直排列的正常狀況。

2009年11月25日 — 浮動圖層（Floating Layer）的技術其實經常應用在許多較長的網頁文件中，藉以呈現能隨著瀏覽器的捲軸移動的浮動廣告或快速選單。

CSS浮動（Floating）. 用於將元素從正常的文檔流中移出，使其可以自由浮動在其容器內。這意味著元素將被放置在容器的左側或右側，並且其他內容將繞過它。

1.float浮起圖層的觀念是立體觀念. float的觀念出現，讓排版的觀念變成立體空間的概念，因此以下列圖式會變成立體圖。

Float 在設計之初是用來呈現文繞圖的效果，可以將元素指定為靠左或靠右浮動，在CSS 中，所有的元素都可以加入 float 屬性。 範例： 未使用float 時，正常的圖片+ 文字效果

CSS float 用來定義區塊的浮動，可以設定為靠左浮動或靠右浮動，常見用法像是文字繞圖片的特效或是DIV 區塊排版上使用，在CSS 設計上任何元素都是可以浮動的，像是.

2020年9月8日 — 假設在伺服器設定全域的浮動影像樣式，在茂些特殊的頁面上，你不想讓影像產生任何浮動，除了重寫整個樣式表之外，可以在文件的內嵌樣式表裡，加上img ...

2020年3月15日 — 本篇進入跟版面調整有關的技巧章節，Float 是很常見的浮動觀念，接著佈局章節會提供一些例子進行設計，最後是非常重要且主流的flexbox 觀念。

2019年2月14日 — 1. 在浮動元素的後面多加一個div 元素（命名為.clearfix），並在.clearfix 使用clear: both 語法。 2. 在要清除浮動內容的父層多加一個.clearfix 的class ...