CSS清除或溢出的最佳实践[英] Best Practice for CSS Clear or Overflow

本文是小编为大家收集整理的关于CSS清除或溢出的最佳实践的处理方法,想解了CSS清除或溢出的最佳实践的问题怎么解决?CSS清除或溢出的最佳实践问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

与同事讨论有关CSS Clear/Overflow的最佳实践.请关闭我们中的一个,解释为什么一个人比另一个更好.

乔尔的代码(使用溢出):

<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>

克里斯的代码(使用清除):

<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>

都制作此图像:

正确定位元素

谁是对的? :)

推荐答案

如果您始终知道成功的元素将是什么,则可以应用清晰:两者:两者兼而有之.重视该元素并进行您的业务. 这是理想的选择,因为它不需要精美的黑客攻击,也没有其他元素使其具有完全的语义.

http://css-tricks.com/all-about-floats/

其他推荐答案

溢出:当您拥有比内部内容小的容器时,最好使用隐藏;而清晰:当您希望浮动容器不在最近的容器旁边定位时,最好使用两者.

查看您的红色SQURE示例,您需要使用清晰而不是溢出,但不像在此处完成.也许更像:

.container { width:110px; clear:both; }
.one, .two { float: left; width: 50px; height: 50px; margin-right:10px; background-color: red; }

基本上你既错又正确.乔尔使用了更好的HTML方法,但是克里斯以错误的方式使用了正确的CSS代码.

其他推荐答案

这是一个妥协:

我会这样写.克里斯的代码是我不写的东西,而只是冗余空的divs的原因.

本文地址:https://www.itbaoku.cn/post/566581.html