CSS清除或溢出的最佳实践

前端之家收集整理的这篇文章主要介绍了CSS清除或溢出的最佳实践前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
与同事讨论CSS清除/溢出的最佳实践.请关闭我们中的一个,并解释为什么一个比另一个好.

JOEL’S CODE(使用溢出):

<style>
  .container { overflow: hidden; }
  .one,.two { float: left; width: 50px; height: 50px; background-color: red; }
</style>

<div class="container">
   <div class="one"></div>
   <div class="two"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
</div>

CHRIS’代码(使用明确):

<style>
  .clear { clear: both; }
  .one,.two { float: left; width: 50px; height: 50px; background-color: red; }
</style>

<div class="container">
   <div class="one"></div>
   <div class="two"></div>
   <div class="clear"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
   <div class="clear"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
   <div class="clear"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
   <div class="clear"></div>
</div>

两者都生成这个图像:

谁是对的?

猜你在找的CSS相关文章