这个div标签的用法是什么，只有明确的规则

Question

我注意到<div style="clear:both;"></div>经常在div区域之间的网站上使用。鉴于没有为此指定宽度和高度等其他规则，这种用法的影响是什么？站点代码的示例如下所示

<div id="content">
<div id="middle-cont"></div>
<div id="bot-r">
  <div style="clear:both;"></div>
  <div class="hwd-module latest-audio"></div>
  <div style="clear:both;"></div>
</div>
</div>

<style>
  #middle-cont {
    padding: 18px 0px;
    margin-top: 20px;
    margin-right: -40px;
    margin-left: -40px;
}
#bot-r, #bot-c, #bot-l {
    width: 32%;
    height: auto;
    float: right;
    padding: 5px;
}    
</style>

Answer 1

Clear:both

用于清除任何（或所有前面的）浮动。

它基本上意味着“左侧或右侧不允许浮动元素”。

让我们试着通过演示来理解这一点：

您可以在下面看到几个示例：

不清楚 - ＆gt; http://jsfiddle.net/0xthns3k/

html和css如下：

HTML：

<div class="left">
</div>
<div class="right">    
</div>
<!-- No clear -->
<div class="Green"></div>

CSS：

div {
    display:inline-block;
    width: 150px;
    height:150px;
}

.left {
    background-color:Orange;
    float:left;
}

.right {
    background-color:Red;
    float:right;
}

.Green {
    background-color:Green;
}

.yellow {
    background-color:yellow;
    width:30px;
}

这是生成的HTML的图像。

如果你看到这里，绿色的盒子放在两个浮动元素的中心。嗯，实际上由于有浮动元素，新的“非浮动”元素实际上放置在最左边的浮动元素附近。因此，您会看到绿色元素紧邻最左侧的浮动元素。

现在，如果您要将另一个元素向左浮动，这将自动适合橙色和绿色元素。

见下文：

http://jsfiddle.net/0xthns3k/1/

此外，对于所述HTML，这个“新”左浮动元素的位置也不会那么重要。

放置在绿色元素

下面

<div class="left">
</div>
<div class="right">    
</div>
<!-- No clear -->
<div class="Green"></div>
<div class="left yellow">
</div>

放置在右浮动元素之后。

<div class="left">
</div>
<div class="right">    
</div>
<div class="left yellow">
</div>
<!-- No clear -->
<div class="Green"></div>

放置左浮动元素后

<div class="left">
</div>
<div class="left yellow">
</div>
<div class="right">    
</div>
<!-- No clear -->
<div class="Green"></div>

上述所有HTML代码都会生成相同的HTML，如上图所示。

清楚 - ＆gt; http://jsfiddle.net/bk3p160d/

此处仅对HTML进行了略微修改：

HTML

<div class="left">
</div>
<div class="right">    
</div>
<div class="clearAll"></div>
<div class="Green"></div>

和另外一个CSS类：

CSS

.clearAll {
    clear:both;
}

如果你看到这里，绿色元素位于包含上述浮标的线下方。这是因为“clear：both”告诉HTML呈现引擎  “左侧或右侧不允许浮动元素”。因此，它不能将此元素放在同一条线上，因为它会违反定义。这会使引擎将其放在新线上。在该行上，前面的float属性基本上无效。 因此，clear:both用于有效清除任何前面的浮点数。

有关详细信息，请参阅此处：http://www.w3schools.com/cssref/pr_class_clear.asp

希望这有帮助!!!