解决方法一:使用css clear清除浮动
对父级div标签闭合</div>前加一个clear清除浮动对象。
<style type="text/css"> .one{ border:1px solid red; width:100px; height:100px; } .two{ border:1px solid green; width:100px; height:100px; } .parent{ border:1px solid blue; } </style> <div class="parent"> <div class="one" style="float:left"> hello </div> <div class="two" style="float:right"> world </div> <input type="text" /> <div style="clear:both"></div> </div>
解决方法二:对父级样式加overflow样式
此方法非常简单，也可以作为推荐解决父级不能被撑开自适应高度的方法，可以不增加div盒子对象，只需要对父级加一个overflow:hidden样式即可。
<style type="text/css"> .one{ border:1px solid red; width:100px; height:100px; } .two{ border:1px solid green; width:100px; height:100px; } .parent{ border:1px solid blue; overflow: hidden; } </style> <div class="parent"> <div class="one" style="float:left"> hello </div> <div class="two" style="float:right"> world </div> <input type="text" /> </div>
