float 撑起 父层 高度 解决方法

我们在网页开发时常常会遇到将多个元素并排排列的需求，一般我们对子元素 用float 属性时都发现父元素高度无法被撑起

解决方法：

1.给父层元素设置  overflow：hidden 

<div style="overflow:hidden">
   <div style="float:left;width:50%;height: 500px"></div>
   <div style="float:left;width:50%;height: 500px"></div>
</div>    

2.在父层元素 结尾前 使用一个 子元素设置  clear:both 

<div>
   <div style="float:left;width:50%;height: 500px"></div>
   <div style="float:left;width:50%;height: 500px"></div>
   <div style="clear:both"></div>
</div>  

3.给父层元素加高度