Html 跨度样式浮动：左侧正在断开div块

我正在维护一段代码，这段代码目前有点不正常。基本上，我们有一个带有自己样式设置的

标记，我们有多个逻辑标记，它们将显示不同的

标记，这些标记将保存不同的数据位

我看到的是，当我使用带有样式设置

float:left的
标记时这会导致
标记的颜色框不会环绕

下面是代码示例：



TestData：向左浮动
将
溢出：自动添加到父div:

#testData {
    overflow:auto;
}

另一种方法是使用
清除：两者都

#testData:after {
    clear: both;
    display: block;
    content: "";
}


其他解决办法：

使用溢出：隐藏

#testData {
  overflow: hidden;
}

或者制作一个虚拟元素

HTML

<div id="testData" style="padding:4px; width: 100%; border: 1px solid #999; background: #d1d1d1; text-align:right;">
    <span style="padding: 3px 1 1 1; float:left;">
         TestData: Float Left
    </span>    
  <div class="clearBoth"></div>
</div>


这就是我们所知道的。当浮动一个元素时，它会退出文档的“流”。这也意味着父级不考虑其宽度和高度。这就是为什么测试数据似乎崩溃了：它认为它没有内容。要解决这个问题，有一些选择。最简单的方法是使用
overflow
，但是，在我看来这是一种不好的做法。在这种情况下，它可以工作，但在其他一些情况下，您将无法使用它，因为溢出父级的内容将被隐藏（
overflow:hidden
），或者会出现一个滚动条（
overflow:auto
）

最常见和最合适的解决方案是使用a来解决此问题
:after
是这样一个伪元素（请参见
:after
与
:after
）。基本上，伪元素可以在CSS中创建在HTML中不可见的元素

每次使用
float
，都需要一个clearfix。因此，创建一个
.clear
类非常有用，您可以将该类应用于需要清除浮动的每个元素。看起来是这样的

HTML

现在，您可以将
class=“clear”
添加到每个需要清除的元素中。如果您对SASS感兴趣，您可能会发现这很有帮助，但考虑到您是HTML新手，我建议您首先坚持使用HTML和CSS。
对于初学者，我强烈建议不要使用内联样式。在大多数情况下（就维护代码而言），将样式保存在一个地方（样式表）是比较容易的方法。实际上，上面部分中的div和span标记中显示的样式是从CSS中提取的。然而，即使在那里，我也看到了相同的结果（阴影框没有环绕span标记中的文本），是否需要详细说明？
.clearBoth {
  clear: both;
}

#testData {
    padding:4px;
    width: 100%;
    border: 1px solid #999;
    background: #d1d1d1;
    text-align:right;
}
#testData:after {
    content:"";
    clear: both;
    display: table;
}
#testData > span {
    padding: 3px 1px 1px;
    float:left;
}

<div id="testData" class="clear">
    <span>
         TestData: Float Left
    </span> 
</div>

.clear:after {
    content:"";
    clear: both;
    display: table;
}