关于如何在CSS中应用clear属性的困惑

Question

我正在完成一个教程，我有一个使用float元素的表单。表单目前所有标签和输入框彼此相邻。

要对齐表单以便一切都在左侧，本书教我：

Put-＆GT; 明确：左; 如下

label {
  float: left;
  width: 5em;
  text-align: right;
  margin-right: .5em;
  **clear: left;**
}
input {
  background-color: #CCCCFF;
  float: left;
  clear: right;

我理解clear属性的方式是，如果我将它设置在浮动元素上，则意味着我对该元素的左/右/两者都不需要任何内容​​。

因此，在我的脑海中，不是在标签上放置clear属性，而是在输入上放置 clear：right; 也应该有效（因为那时没有任何东西可以在输入框），但当然它没有。

在我的理解中存在差距，有人可以指出为什么在输入上放置clear：right属性不会像在标签上放置clear：left属性那样工作吗？

谢谢

Answer 1

基本上clear属性类覆盖了浮动。

我准备了这个例子：http://jsfiddle.net/vlrprbttst/JF7wD/1/

所有div都浮动到左侧。当应用float时，它们都会彼此相邻。如果您需要临时阻止此行为但仍需要浮动元素，该怎么办？使用clear

时的那个

不是解释它的最好方法，但我希望你能得到它：）

Answer 2

默认情况下，<input>和<label>元素是内嵌元素，因此在正常情况下，它们不会填充其父元素的宽度，也不需要自己的行。因此，一个接一个地拥有<input>元素和<label>元素并不严格要求任何浮动逻辑：

<form>
    <input type="text"></input><label>test</label>
    <input type="text"></input><label>test</label>
    <input type="text"></input><label>test</label>
</form>

没有任何CSS，上面的标记产生了这个：

float:left CSS用于强制元素退出文档的 flow ，并拥抱其相邻的对应元素。它主要用于块元素。然后clear:left/right/both覆盖此功能，以便将前进元素带回到文档流中。阅读它here。

如果你只是想强迫<input>元素在他们自己的行上，也许你可以将它们包装在像<{1}}这样的块元素中：

<div>

以上，没有任何CSS，将产生这个：

了解inline和block元素，以便进一步了解元素在文档中的自然位置。

总而言之， float CSS属性是一种从文档流中取出元素并将其放置在内联元素左侧或右侧的方法。引用MDN：

  

浮点CSS属性指定一个元素应该从正常流中获取并放置在其容器的左侧或右侧，其中文本和内联元素将环绕它。

Answer 3

它将无法正常使用float: left并希望clear: left，而不是clear: right。如所示here

请参阅下面的代码：

<强> CSS

label {
  float: left;
  width: 5em;
  text-align: left;
  margin-right: .5em;
  clear: left;
}
input {
  background-color: #CCCCFF;
  float: left;
  clear: left;
}

HTML - 确保您希望标签输入的顺序也正确

<form>
    <label>test</label><input type="text"></input>
    <label>test</label><input type="text"></input>
    <label>test</label><input type="text"></input>
</form>

如果你不确定，你可以选择清除这两个，但是如果你向左浮动则使用向左清除，而不是向右清除，因为右边没有任何要清除的内容。