CSS：浮动之前浮动

Question

我的标记类似于：

<label/><input/><label/><input/>

并希望将标签浮动到输入的左侧，标签上有宽度。如果标签文本换行，我希望它按下下一个标签并输入。

我尝试使用的解决方案就是这样运行

label { float: left; clear: left; width: 25% }
label:before { content: " "; display: block; float: none; clear: left; }

然而，这不起作用。事实上，如果我用“a”替换“”，我可以看到：之前的生成内容就像浮动一样：左，即使浮点数也没有在那里！

编辑我主要是想了解为什么上述CSS的行为方式。任何纯CSS解决方案都会很酷，但我不打算通过更改标记来设计样式：）

问题的演示是在https://singpolyma.net/so-5080542.html你可以看到红色的“看到这里”文字是带有标签的左侧浮动，而不是像我期望的那样清除所有内容并自行排队。

有什么想法吗？

Answer 1

Here my solution。 这几乎是因为你的input有一个块属性。设为float:left，它似乎按预期工作。是吗？

Answer 2

我知道它已经过时了，但请尝试以下代码。我已经在你的代码上尝试了它，它可以工作。

label:before{
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

此解决方案来自：http://css-tricks.com/snippets/css/clear-fix/

Answer 3

找到一个网站谈论它： http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/

.container-with-generated-content:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;

}

Answer 4

为什么不将标签+输入包装在容器内并清除此容器？ 顺便说一句，这更容易风格，并且可以在不支持的浏览器中使用：在speudo元素之前。

Answer 5

我并不完全明白你想要实现的目标，但我希望我做对了。尝试：

<div>
  <label>Label</label>
  <input type="text" />
</div>

<div>
  <label>Label 2</label>
  <input type="text" />
</div>

CSS：

label {
    width: 25%;
    float: left;
    display: block;
}

div {
    clear: left;
}