浮动 -- 案例 · 前端知识 -- 学习整理

>[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 重叠也可以使用边距负数形式来解决