清除浮动,当使用float对子盒子布局时,父盒子无法拥有自适应高度,所以在下方再写一个与父盒子同级的盒子,则会出现与子盒子并排的情况,
可使用清除浮动的方式解决
<div style="width: 540px;min-height: 100px;height: auto;" class="versionBox"> <div class="float-left versionBlock"> 子盒子 </div> </div> <div style="width: 300px;margin: 0 auto 0 auto;" class="text-center"> 父盒子 <div> <style lang="scss"> .versionBox:after{ //设置父盒子的after设置内容,清除浮动, content: "."; display: block; height: 0; clear: both; visibility: hidden; } .versionBlock{ width:160px; height:41px; line-height: 40px; border: 1px solid #EEEFF3; float:left; text-align: center; } </style>