效果圖
有很多的布局效果，標準流沒有辦法完成，此時就可以利用浮動布局。浮動可以讓多個塊元素一行排列顯示。（網頁布局第一準則：多個塊級元素縱向排列找標準流，多個元素橫向排列找浮動）
浮動特性一
浮動的元素會脫離標準流(脫標)。
浮動的元素會一行內顯示並且元素頂部對齊的。
浮動的元素會具有行內塊元素的特性。
浮動特性二
注：浮動的元素是相互貼靠在一起的(不會有縫隙),如果說父級寬度裝不下這些浮動的盒子，多出的盒子就會另起一段並且對齊。
浮動特性三
浮動的元素會具有行內塊元素的特性。
任何元素都可以浮動，不管之前是什麼模式的元素，新增了浮動之後具有行內塊元素的特性。
如果塊盒子沒有設定寬度，預設寬度和父級一樣寬的，但是新增了浮動之後，它的大小根據內容決定。
浮動的盒子中間是沒有間隙的。
住：為了約束浮動元素的位置，我們一般布局的先用標準流的父元素排列上下位置，之後內部子元素採取浮動排列左右位置。（第一準則)
left12
3456
78
CSS浮動 盒子模型
因為div都是獨自佔一行,如果想要幾個div佔一行就要使用浮動。one two three 頁面展示 紅色框向右浮動 乙個頁面的寬度最長是1350px如果第三個浮動框 每個浮動框是500px 放不下會自動浮動到下一行如果第乙個浮動框高度比第二個浮動框高度要大,就會出現下圖的情況。清除浮動 如果想要浮...
2浮動 盒子模型
讓豎著排列的元素橫著排列 float none 不浮動 left 左浮動 right 右浮動 影響 1.讓元素橫著排列 2.脫離文件流 3.左浮動找左邊，右浮動找右邊 4.貼靠現象，父元素寬度不夠，子元素換行 5.混排 注 子元素新增浮動，父元素要清除浮動 float脫離文件流，但是它在其他盒子內的...
css盒子模型，定位，浮動
1.盒子模型 margin 外邊距 清除邊框外的區域，外邊距是透明的。border 邊框 圍繞在內邊距和內容外的邊框。padding 內邊距 清除內容周圍的區域，內邊距是透明的。content 內容 盒子的內容，顯示文字和影象。最終元素的總寬度計算公式是這樣的 總元素的寬度 寬度 左填充 右填充 左...