方法一
html的div模块
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>
/*直接 清除浮动 找到父盒子的底部 */
.top >.wrapper>.right::after{
content:'';
display:block;
clear:both;
}
因为浮动起来div.left,div.right都不占空间了,我也没有给父盒子设定高度,所以他们做不到支撑父盒子的作用,当我添加一个行级模块并且他左右两边都不能有悬浮的盒子,那么他只能是在下一行出现(不信的话可以在方法一的content中加文字,方法二的div模块中输入汉字看它在页面显示的位置),此时我不给它内容,那么他也没办法显示内容,所以只是存在充当一个占用空间的位置。
方法二
html的div模块
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
<!--清空浮动-->
<div class="white"></div>
</div>
.top>.wrapper>div.white{
clear:both;
background-color:white;//这个颜色随便就可以 反正都显示不出来
}
记得都先把div.left和div.right浮动起来
.top >.wrapper>.left{ float:left; } .top >.wrapper>.right div{ float:left; } ```
看一下前后对比图
↓