讓豎著排列的元素橫著排列
float:none(不浮動)，left(左浮動)，right(右浮動)
影響：1.讓元素橫著排列
2.脫離文件流
3.左浮動找左邊，右浮動找右邊
4.貼靠現象，父元素寬度不夠，子元素換行
5.**混排
【注】子元素新增浮動，父元素要清除浮動
float脫離文件流，但是它在其他盒子內的文字依然會為這個元素讓出位置，環繞在該元素四周
標準盒模型組成
內容區域：width ， height
內邊距區域：padding
邊框區域：border
外邊距區域：margin
內邊距(padding)
padding-left:左內邊距
padding-right:右內邊距
padding-top:上內邊距
padding-bottom:下內邊距
padding:x; 四個方向
padding:x x; 上下 左右
padding:x x x; 上 左右 下
padding:x x x x; 上 下 左 右
【注】沒有auto，沒有負數，會把盒子撐大，對img有影響，對background-image:;沒有影響。
外邊距(margin)
margin-left:左外邊距
margin-right:右外邊距
margin-top:上外邊距
margin-bottom:下外邊距
margin:x; 四個方向
margin:x; 上下 左右
margin:x x; 上 左右 下
margin:x x x; 上 下 左 右
【注】有負數，有auto，不會把元素撐大。
margin:0 auto;左右居中，自適應
外邊距常見問題
垂直方向外邊距相遇會重合
並列關係：只寫乙個方向
巢狀關係：給父元素新增垂直方向的內邊距，並適當的改變高度值
盒模型大小
w = width + 左右內邊距 + 左右邊框 + 左右外邊距
h = height + 上下內邊距 + 上下邊框 + 上下外邊距
盒模型佔位大小
w = width + 左右內邊距 + 左右邊框
h = height + 上下內邊距 + 上下邊框
CSS浮動 盒子模型
因為div都是獨自佔一行,如果想要幾個div佔一行就要使用浮動。one two three 頁面展示 紅色框向右浮動 乙個頁面的寬度最長是1350px如果第三個浮動框 每個浮動框是500px 放不下會自動浮動到下一行如果第乙個浮動框高度比第二個浮動框高度要大,就會出現下圖的情況。清除浮動 如果想要浮...
盒子模型及浮動
效果圖 效果圖 有很多的布局效果，標準流沒有辦法完成，此時就可以利用浮動布局。浮動可以讓多個塊元素一行排列顯示。網頁布局第一準則 多個塊級元素縱向排列找標準流，多個元素橫向排列找浮動 浮動特性一 浮動的元素會脫離標準流 脫標 浮動的元素會一行內顯示並且元素頂部對齊的。浮動的元素會具有行內塊元素的特性...
css盒子模型，定位，浮動
1.盒子模型 margin 外邊距 清除邊框外的區域，外邊距是透明的。border 邊框 圍繞在內邊距和內容外的邊框。padding 內邊距 清除內容周圍的區域，內邊距是透明的。content 內容 盒子的內容，顯示文字和影象。最終元素的總寬度計算公式是這樣的 總元素的寬度 寬度 左填充 右填充 左...