1、父级div定义height
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style type="text/css"> .box{ background-color:greenyellow; border: 1px solid red; } .left{ float: left; width: 20%; height: 200px; background: #ddd; } .right{ float: right; width: 30%; height: 80px; background: #ddd; } </style> </head> <body> <div class="div1"> <div class="left"> 左div </div> <div class="right"> 右div </div> </div> </body>
原理:手动定义height,就解决了父级div无法自动获取高度的问题
2、结尾处加空div标签clear:both
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style type="text/css"> .box{ background-color:greenyellow; border: 1px solid red; } .left{ float: left; width: 20%; height: 200px; background: #ddd; } .right{ float: right; width: 30%; height: 80px; background: #ddd; } .clearfix{ clear: both; } </style> </head> <body> <div class="div1"> <div class="left"> 左div </div> <div class="right"> 右div </div> <div class="clearfix"> </div> </div> </body>
原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
3、父级定义伪类:after
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.box{ background-color:greenyellow; border: 1px solid red; } .left{ float: left; width: 20%; height: 200px; background: #ddd; } .right{ float: right; width: 30%; height: 80px; background: #ddd; } .box:after{ display: block; clear: both; content: ""; height: 0; } </style> </head> <body> <div class="box"> <div class="left"> 左div </div> <div class="right"> 右div </div> </div> </body>
原理:和方法2类似
4、父级div定义overflow:hidden/auto
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style type="text/css"> .box{ background-color:greenyellow; border: 1px solid red; overflow: hidden; } .left{ float: left; width: 20%; height: 200px; background: #ddd; } .right{ float: right; width: 30%; height: 80px; background: #ddd; } </style> </head> <body> <div class="box"> <div class="left"> 左div </div> <div class="right"> 右div </div> </div> </body>
原理:使用overflow:hidden/auto时,浏览器会自动检查浮动区域的
ps:
推荐使用伪类的方法清除浮动,浏览器支持好,许多主流网站都是这种方法。