Box & Layout 實驗台

1. 盒模型 (Box Model)

2. 定位 (Position)

控制藍色盒子的定位方式:

3. 浮動 (Float & Clear)

Container (Relative)
Content Area

Float & Clear 演示

IMG

這是一段測試文字。當左側的圖片設置為 Float 時,這段文字會環繞在圖片的周圍。浮動最初的設計目的就是為了實現這種文字環繞圖片的排版效果。觀察下方的紅色塊在 Clear 屬性切換時的表現。

我是緊跟在後面的元素 (Clear Box)
Fixed!