标签：浮动 both 盒子 color clear background box2
父盒子没有设置高度，里面的子盒子box1由于浮动导致脱离父盒子从而无法再撑开父盒子的高度，父盒子高度因此塌陷，最终导致父盒子上下边框贴在一起。
<style>
.fabox {
border: 10px solid red;
margin-top: 20px;
}
.sonbox1 {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.sonbox2 {
background-color: green;
}
</style>
<div class="fabox">
<div class="sonbox1"></div>
<div class="sonbox2"></div>
</div>
效果图如下：
此时如果在父盒子内部再加上一个盒子box2，只要给这个box2盒子clear:both属性，父盒子会被撑开，撑开原理可以理解为因为box2给了clear:both属性后相当于自动加了一个box2到父盒子的外边距（黄色箭头所示）
<style>
.fabox {
border: 10px solid red;
margin-top: 20px;
}
.sonbox1 {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.sonbox2 {
clear: both;
background-color: green;
}
</style>
<div class="fabox">
<div class="sonbox1"></div>
<div class="sonbox2">Aaaaaa</div>
</div>
这个时候的
.sonbox2 {
clear: both;
background-color: green;
}
实际上和
.sonbox2 {
margin-top: 200px;
background-color: green;
}
效果差不多，只不过margin-top需要给固定高度不利于内容显示，而clear：both是自动给高度。
注意上面为了演示所以给box2加上了内容Aaaa，实际运行去掉内容，页面就不会显示box2了。
但此时的box2实际上作用仅仅只是为了清除父盒子的浮动影响，副作用就是多出1个div结构，不利于后期维护，此时我们可以采用伪元素里实现这个目标，在css里添加如下代码：
.fabox::after {
content: '';
display: block;
clear: both;
}
效果图：
可以看到在父盒子后面添加伪元素后，父盒子高度已经被撑开了。
在父盒子后面添加伪元素后实际相当于在父盒子里新增了1个类似box2的盒子，所以效果和在box2设置vlear:both一样，但用伪元素不会在页面显示新增的元素。
我们给这个伪元素添加内容就能对比出效果了
.fabox::after {
content: '我是父盒子元素后面新增的伪元素，背景颜色绿色，效果和box2一样';
display: block;
clear: both;
background-color: green;
}
标签：浮动,both,盒子,color,clear,background,box2 来源： https://www.cnblogs.com/JeffreyZhu/p/15261955.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。