否则为空的< div>用CSS清除：两个属性？ [英] What is the meaning of an otherwise empty <div> with the CSS clear:both property?

问题描述

我想知道是否有人知道我在下载的有效html文件中发现的此标签的含义。

 < div style =clear：both;>& nbsp;< / div>感谢您的帮助。
 >解决方案
这种技术被称为 spacer div  - 文章现在是十岁，当时这是一个很好的解决一个共同的问题。它通常出现在这样的场景中：
 < div class =container 
< div style =float：left> 
 ... 
< div style =float：left> 
 ... 
< / div> 
< div style =clear：both>& nbsp;< / div> 
< / div> 
  
内部 div 你只是省略了spacer div容器元素不会完全包含其内容（除非你自己浮动，这通常是不切实际的）。 & nbsp; 在一些旧版本的浏览器中是必需的（你知道哪一个），以确保它在所有情况下的预期行为，即一个简单的 ; div style =clear：both/> 并不总是工作 - 你真的需要一个 div  ）内容，使其无处不在。
 
 
 
这是一个常见问题的解决方案，但有更多优雅的方法来解决这个问题，例如使用：after CSS伪类。这更优雅，因为它不需要我们添加语义上无价值的标记元素，只是为了样式的目的。 另一个很棒的文章，提供了不同的解决方案。
 
I'm wondering if anybody knows the meaning of this tag I found in a valid html file I've downloaded.
<div style="clear: both;">&nbsp;</div>
Thanks for help in advance.
解决方案
The technique is known as a "spacer div" - the article is now ten years old and at the time this was a good solution to a common problem. It typically appears in scenarios like this:
<div class="container">
  <div style="float:left">
    ...
  <div style="float:left">
    ...
  </div>
  <div style="clear:both">&nbsp;</div>
</div>
The inner divs are floated - if you simply left out the "spacer div" the container element would not completely enclose its contents (unless you float it itself, which is often impractical). The &nbsp; is needed in some older browsers (you know which one) to ensure it behaves as expected in all situations, i.e. a simple <div style="clear:both"/> didn't always work - you really needed a div with actual (though invisible and nonsensical) content to make it work everywhere.

It's a working solution to a common problem, but there are more elegant ways to solve this, e.g. using the :after CSS pseudo class. This is more elegant because it doesn't require us adding semantically worthless markup elements that are just there for styling purposes. Another great article with a different solution.

                        
这篇关于否则为空的&lt; div&gt;用CSS清除：两个属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！