盒子模型浮动起来不支撑父盒子怎么办

方法一

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;

} ```

看一下前后对比图

↓