Html 如何明确：两者皆有；正确地 .cl{clear:两者；} .block{} .left{float:left；} 标题1 值1 标题2 价值2

是否可以避免在每个

.block

的末尾添加

？

尝试在

上使用
溢出：隐藏
。block
我知道这有时会解决问题。
您可以这样做：

<style>
.cl {clear:both;}
.block {}
.left {float:left;}
</style>

<div class="block">
   <div class="left">Title 1</div>
   <div class="left">Value 1</div>
   <div class="cl"></div>
</div>
<div class="block">
   <div class="left">Title 2</div>
   <div class="left">Value 2</div>
   <div class="cl"></div>
</div>


br{clear:两者；}
标题2
价值2



第二个选项是：@animuson comment

<style>
    br {clear:both;}
</style>
<div class="block">
    <div class="left">Title 2</div>
    <div class="left">Value 2</div>
</div>
<br/>


.container br{clear:两者；}
标题2
价值2


此问题有两种常见的解决方案

将
overflow:hidden
添加到浮动元素的父元素（因此在本例中，
.block
）
使用“clearfix”：
这里有更多信息：


使用
清除的好时机：当您已经有一个元素可添加到其中时，这两个

例如，带页脚的浮动列的常见情况是：
您根本不需要
div。只需在block div上清除
：两个

例如：

CSS

HTML


标题1
值1
标题2
价值2

编辑：添加代码
您是否尝试过在{clear:tweet}
之后使用类似的
.block:after？我从来没有尝试过使用before或after选择器，因此我不知道它们是如何工作的。不过，您确实应该为中断使用类名，因此它不适用于文档中的所有中断。但是如果你这样做，它与OP的例子没有什么不同。是的，这就是为什么我在元素级别+1上这样做：使用
overflow:hidden
强制浮动保持在块元素中<代码>清除
对于作业来说是错误的工具。@Søren Løvborg为什么
清除
对于作业来说是错误的？学习经验的真正问题。@Eonasdan：这是可行的，但还有更干净的选择<代码>溢出：隐藏
仅涉及添加<代码>溢出：对CSS隐藏
，这比在HTML中添加一个额外的元素来清除浮动更干净。而clearfix只涉及在HTML中添加一个额外的类，这也比添加一个额外的元素更干净。啊。我真不敢相信我爬上了山，却发现圣人在他的电脑上发帖，所以
clear
真的是用于
h1
之类的元素，例如，在长文本中的新章节之前，让浮动的数字消失<代码>溢出：隐藏
明确表示“我希望浮动保持在此框内”<如果您有额外的浮动元素（例如菜单），代码>清除也会导致问题，尽管有解决办法，
溢出：隐藏
可以让您更好地控制结果。这也是我最初的想法。不过还没有测试过。
<style>
    .container br {clear:both;}
</style>
<div class="container">
   <div class="block">
       <div class="left">Title 2</div>
       <div class="left">Value 2</div>
   </div>
   <br/>
</div>

.block {
    clear: both;
    overflow: hidden; /* If you want to make the div size to the contents and not collapse use this line (from thirtydot answer) */
} 
.left { float:left; }

<div class="block">
   <div class="left">Title 1</div>
   <div class="left">Value 1</div>
</div>
<div class="block">
   <div class="left">Title 2</div>
   <div class="left">Value 2</div>
</div>