Question

我正在努力维护一些目前无法解决的代码。基本上，我们有一个<div>标记，其中包含自己的样式设置，我们有多个逻辑标记，可以显示不同的<span>标记，这些标记将保存不同的数据位。

我所看到的是，当我使用带有样式设置<span>的{{1}}标记时，这会导致float: left;标记的颜色框不要缠绕<div>。

以下是代码示例：

＆＃13;

<span>

＆＃13;

由于要求，我需要将此span标记向左移动。想知道我的选择是什么工作吗？

Original jsFiddle

Answer 1

将<nil>添加到父div：

overflow:auto

<强> jsFiddle example

Answer 2

其他方式是使用clear: both

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

Fiddle

其他解决方案：

使用overflow: hidden

#testData {
  overflow: hidden;
}

或制作虚拟元素<div class="clearBoth"></div>

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

<强> CSS

.clearBoth {
  clear: both;
}

Answer 3

http://jsfiddle.net/gLfw5wc7/3/

#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;
}

这被称为clearfix。浮动一个元素时，它会得到文档的“流”。这也意味着父母不考虑其宽度和高度。这就是#testData似乎崩溃的原因：它认为它没有内容。要解决这个问题，有一些选择。最简单的方法是使用overflow，但这是不好的做法。在这种特殊情况下它可以工作，但在其他一些情况下你将无法使用它，因为溢出父项的内容将被隐藏（overflow: hidden）或者会出现滚动条（overflow: auto）

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

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

HTML

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

CSS

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

现在，您可以将class="clear"添加到需要清除的每个元素中。如果您使用SASS，您可能会发现this answer有帮助，但考虑到您是HTML新手，我建议您首先坚持使用HTML和CSS。

跨度样式浮动：左侧是破坏div块

3 个答案: