本人前端小白一枚，正在自學前端希望利用部落格記錄並深入挖掘前端的知識。首先從浮動開始。
css 的 float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
float（浮動），往往是用於影象，但它在布局時一樣非常有用。比如在乙個大div中有兩個靠左右的布局時就可以使用浮動。
style
`}
style
.left
.right
}body
我們會發現後面的div aa位置在前面的大div上了。原因是因為我們給了紅綠兩個div浮動缺沒有清除浮動，紅綠div脫離文字流，父容器中寬高沒有子元素撐起來，父容器寬高將為零，所以後面的灰色div會佔據紅綠div的位置。
所以
CSS基礎知識總結之浮動詳解
前言 day4主要講述了乙個重點，那就是浮動 其中包含，什麼是浮動？浮動的作用語法及浮動的清除等 1 css的三種布局機制 css 提供了 3 種機制來設定盒子的擺放位置，分別是普通流 標準流 浮動和定位，其中 1 普通流 標準流 常用元素 div hr p h1 h6 ul ol dl form ...
CSS入門基礎知識（十三） 浮動（一）
網頁布局的本質 用css來擺放盒子。把盒子擺放在相應的位置。css提供了三種傳統布局方式 1 普通流 標準流 2 浮動 3 定位 所謂的標準流 就是標籤按照規定好預設方式排列 1 塊級元素會獨佔一行，從上向下順序排列 2 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行 3 常用元素 ...
CSS入門基礎知識（十五） 清除浮動
額外標籤法 額外標籤法也稱為隔牆法，是w3c推薦的做法 額外標籤法會在浮動元素末尾新增乙個空的標籤。例如 div style clear both div 或者其他標籤 如 br 等 優點 通俗易懂，書寫方便 缺點 新增許多無意義的標籤，結構化較差 注意 要求這個新的空標籤必須是塊級元素 清除浮動 ...