因為div都是獨自佔一行,如果想要幾個div佔一行就要使用浮動。
"one">
"two">
"three">
紅色框向右浮動
乙個頁面的寬度最長是1350px如果第三個浮動框（每個浮動框是500px）,放不下會自動浮動到下一行如果第乙個浮動框高度比第二個浮動框高度要大,就會出現下圖的情況。
清除浮動
如果想要浮動框,和普通框不重合,那麼需要清除浮動。
清除浮動的方法：就是在浮動框下面建立乙個div,並標記id使用css選擇器加上屬性clear
屬性值是both(在左右兩側不允許浮動框元素),left(在左側不允許出現浮動元素)、righ(在右側不允許出現浮動元素)、none(預設值允許浮動元素出現在兩側)
"one">
"clear">
"two">
"three">
1號框是浮動框,2,3不是普通框想要普通框與浮動框不重合,需要清除浮動。
1.盒子的組成
單個盒子
白話解說：
上圖中，紅色邊框為手機的外包裝盒，而且外包裝盒有一定的厚度(border)，為了保 護手機在運送的過程中不被磕壞，我們在盒子裡面四周填充了一層泡沫，並且泡沫也有一定的厚度(padding)，這層泡沫將手機包裹住，手機就是整個盒子的核心內容(content)。手機------>>>內容(content)
泡沫------>>>padding
包裝盒---->>>boder
外包裝間距-->>>margin
我們在修改頁面元素位置的時候，需要設定它相對於盒子的位置，那麼我們有必要清楚關於盒子模型裡面的取值相關問題。
在 css 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。而預設情況下，內邊距、邊框和
外邊距的值均為 0.
佔據頁面大小的區域是整個元素框的總尺寸！預設情況，padding、margin、border
均為 0，假如我們設定了區域內容的 width 和 height，那麼此時整個元素框的總尺寸就是
該區域內容的寬高了，此時，如果設定了 margin 值，那麼整個元素框的總尺寸會發生變化
(變大了)，但是我們希望它的整體布局不發生變化！所有我們可以修改區域內容的尺寸(原 有大小減去設定的 margin 值)。
css盒子模型，定位，浮動
1.盒子模型 margin 外邊距 清除邊框外的區域，外邊距是透明的。border 邊框 圍繞在內邊距和內容外的邊框。padding 內邊距 清除內容周圍的區域，內邊距是透明的。content 內容 盒子的內容，顯示文字和影象。最終元素的總寬度計算公式是這樣的 總元素的寬度 寬度 左填充 右填充 左...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
CSS 盒子模型 定位流 浮動
目錄 css盒子模型 1 內容得寬度和高度 2 元素的寬度和高度 3 元素空間得寬度和高度 css定位流 了解 相對定位 了解 相對定位的應用 絕對定位 了解 固定定位 靜態定位 浮動與清除浮動 了解 一 標準流中的兩種排版方式 1 垂直排版 2 水平排版 浮動 浮動流排版方式 特點 什麼是浮動元素...