浮動 -- 案例 · 前端知識 -- 學習整理

>[danger] ##### 案例 * 實現效果 ![](https://img.kancloud.cn/cb/4f/cb4f11f563709edf206c138e8727c5cd_1561x523.png) 1. 使用彈性盒子 2. 使用浮動，猶豫需要設置盒子直接'margin-rigth' 邊距因此最后盒子寬度為 230 邊距 10 `230*5+5*10 = 1200 大于版心1900` 會出現下移因此解決方式如下 2.1. 使用`:nth-child(5n)` 偽元素去掉 5倍數的右邊距 2.2. 使用定義一個類凡是五的倍數都加上該類型入下`.item.last-item` 2.3. 使用版心內在套一個版心，例如下面`content` 嵌套了一個`box` 版心，box 的最大寬度應該是和父元素 content 寬度一致的，此時將box `margin-right:-10px` 那么為了符合等于父最大寬度1190 ，那么box 寬度給到達1200，`1200 - 左右邊距 = 實際寬度`，此時box 為1200 就可以正好放下 `230*5+5*10 = 1200 `,更簡單的理解最后因為五的倍數盒子多 `margin-right:10px` 邊距因此設置負邊距減去 ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 公共的class */ .content { width: 1190px; margin: 0 auto; background-color: orange; height: 800px; } /* 布局樣式 */ .box { /* margin: 0 -5px; */ /* 3.方案三: 設置負的的margin(沒有兼容性) */ margin-right: -10px; } .item { width: 230px; height: 322px; background-color: purple; color: #fff; /* 浮動 */ float: left; margin-right: 10px; /* margin: 0 5px; */ } /* 1.有可能存在兼容性 */ /* .item:nth-child(5n) { margin-right: 0; } */ /* 2.麻煩一點點 */ /* .item.last-item { margin-right: 0; } */ </style> </head> <body> <div class="content"> <div class="box"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> <div class="item last-item">5</div> </div> </div> </body> </html> ~~~ >[danger] ##### 其他如果boder 重疊也可以使用邊距負數形式來解決