float浮动失效，position定位有效的问题
使⽤的框架：Bootstrap4
使⽤场景：搭后台的前端框架，想实现⼀级菜单左对齐，⼆级菜单右对齐。
出现问题：使⽤float:right或class="float-right"⽆效，position: absolute,right:0px；可以，但是会出现⼆级菜单失去⾼度的问题，因为不想重写布局，所以放弃使⽤绝对定位。
菜单代码：
<div id="menu">
<div class="card bg-secondary">
<a class="card-link text-white" data-toggle="collapse" href="#collapse1">
<div class="card-header row">
<i class="fa fa-cog"></i>
<div class="d-none d-md-block">问题库配置</div>
</div>
</a>
<div id="collapse1" class="collapse" data-parent="#menu">
<div class="card-body row">
<i class="fa fa-object-group"></i><div class="d-none d-md-block float-right">问题库分组设置</div>
</div>
</div>
</div>
<div class="card bg-secondary">
<a class="card-link text-white" data-toggle="collapse" href="#collapse2">
<div class="card-header row">※<div class="d-none d-md-block">菜单⼆</div></div>
</a>
<div id="collapse2" class="collapse" data-parent="#menu">
<div class="card-body row">
※<div class="d-none d-md-block float-right">⼆的⼦菜单</div>
</div>
</div>
</div>
</div>
样式代码：
html,body{
height: 100%;
}
.head{
height: 130px;
width: 100%;
html实现用户注册登录代码position: absolute;
top: 0px;
}
.content{
height: auto;
min-height: 200px;
width: 100%;
position: absolute;
top: 130px;
bottom: 50px;
}
.menu{
padding: 0rem;
}
.menu .card .card-header{
padding: 0.25rem 0.55rem;
align-items: center!important;
}
#menu .card-body{
padding: 0.25rem 0.25rem;
width: 100%;
align-items: center!important;
}
#menu .d-none.d-md-block{
margin-left: 5px;
}
在逐个删除⼆级菜单的样式后，发现问题不在⼆级菜单⽂字<div class="d-none d-md-block float-right">问题库分组设置</div>的样式后，开始逐个删除⼆级菜单<div class="card-body row">，这是发现问题出在属性display上，在.row⾥存在display: flex;（Bootstrap4框架的样式），经过百度搜索并尝试，发现在添加#menu .card-body{justify-content: flex-end !important;}后实现效果。