碰到这种情况，我们可以将子元素和容器之间再套一层div，把这个div的宽度设宽一点，让它的宽度能容下上面四个元素的宽度加上外边距，此时，这div的宽度肯定比最外层容器的宽度还宽，不过最外层容器可以设置overflow:hidden，将它裁剪掉就行了。
修改后
.box {
width: 380px;
height: 120px;
border: solid 1px #c1131d;
margin: 50px 30px;
overflow: hidden;
float: left;
background-color: #2AC845
}
.box1 {
width: 500px;
background-color: #0062CC;
}
.box1 div {
width: 80px;
height: 20px;
margin: 20px 20px 20px 0px;
background-color: pink;
float: left;
}
不加
overflow: hidden;
float: left;
清除浮动 float
当父元素没有设置高度时，如果它子元素浮动，子元素就无法撑开父级，父级就需要清除浮动。如果子元素里面有相对或者绝对定位的元素，定位超过父级范围的部分会被裁切掉，使用after伪元素的方法，可以很好地解决这个问题。
.mui-clearfix:after, clearfix:before
{
content: “”;
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
将clearfix这个类给父类就好了。
多元素水平居中
多元素水平居中，其实可以用内联块元素的特性，将多个元素转化为内联块，方法为：“display:inline-block”，然后在它们的父级上设置“text-align:center”来让这些内联块水平居中，这些内联块之间会有不必要的小空白，可以通过让这些内联块的代码不换行来解决，然后再用margin设置自定义的间距。
多元素右浮动，顺序颠倒
多元素水平居中，其实可以用内联块元素的特性，将多个元素转化为内联块，方法为：“display:inline-block”，然后在它们的父级上设置“text-align:center”来让这些内联块水平居中，这些内联块之间会有不必要的小空白，可以通过让这些内联块的代码不换行来解决，然后再用margin设置自定义的间距。
不添加父Div时。
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 10px;
float: right;
}
.box {
width: 800px;
height: 120px;
background-color: #0062CC;
float: right;
}
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 10px;
float: left;
}
边线合并
边线合并指的是如果元素都设置了四周的边框，那么元素之间如果不设置margin间距的话，它们之间的间隔就是两个边框的距离，如果想达到让它们之间的距离是一个边框的宽度效果应该怎么设置呢?其实用margin的负值就可以了。
样式
div {
width: 100px;
height: 100px;
background-color: pink;
float: right;
border: solid 1px #0062CC;
}
如图
修改后：
div {
width: 100px;
height: 100px;
background-color: pink;
float: right;
border: solid 1px #0062CC;
margin-right: -1px; //设置margin-right：为负值
}
如图
如果是table表格的话， border-collapse: collapse;
table的边线合并，将table的样式属性设为：“border-collapse:collapse”,这样表格的table标签，td标签和th标签上设置的四周的边线都会合并成一条边线。
流体布局与border-box
流体布局，是指的用百分比来做宽度的布局，这种布局一般用在移动端，PC端一般使用固定宽度的布局，移动端的设备屏幕种类非常多，为了应对不同的宽度，可以用百分比来动态适应，这就是流体布局，既然用百分比来做单位，如果盒子增加border或者padding，那么盒子还得减去设置的border和padding，才能保持它的宽高不变，但是减去这些border和padding是非常麻烦的，这里有一个CSS属性就是“box-sizing”，把这个属性设置为“border-box”，那么盒子的真实尺寸的计算就从盒子边界开始，这样就可以解决刚刚说的问题，如图：
修改：
.box {
height: 100px;
width: 200px;
border: solid 1px #2AC845;
float: right;
}
最后
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
599072)]
[外链图片转存中…(img-3YmaKliz-1714861599072)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
