css - Is there any difference between float: none and clear: none

Question

I was doing a bit of stuff using float and clear. I found no difference using float: none; or clear: none; Is there any? can anybody illustrate the difference with an example

Answer 1

Float:none;告诉元素你不希望它浮动。

Clear告诉其他元素是否应该允许它们浮动，如果没有，则允许两侧浮动。这就是为什么当您使用clear:both;浮动停止时。

Answer 2

他们是两个完全不同的东西。

float将使元素在其父元素内左对齐或右对齐（参数）。float: none什么都不做，除非元素已经浮动。浮动元素失去了自动填充的宽度，并将其减小到尽可能小。

clear将确保您告诉的一侧没有浮动元素。如果有，它将向下移动，直到给定方向上没有。clear: both将检查这两个方向。

这是一个插图，向您展示做什么floats和clears做什么。

Answer 3

似乎您不了解做什么的基本概念float。分配给块级元素的任何floatexcept值都会将该元素从文档流中取出。假设您有两个不同的元素，一个带有，另一个带有。现在后者可能在文档流中或文档流之外——取决于它的浮点值。我给你举两个例子。在第一个版本中，红色段落使用，在第二个版本中，红色段落使用nonedivfloat:noneclear:nonefloat:noneclear: none

红色段落使用float:none：

#usefloatnone
{
  border: 1px dotted black;
  background-color: red;
  width: 1050px; height: 350px;
  
  float: none;  
}

#useclearnone
{
  border: 1px dotted black;
  background-color: red;
  width: 1050px; height: 200px;
  float: right;
  
  clear: none;
}

#normal 
{
  border: 1px dotted black;
  width: 1050px; height: 100px;
}

</style>

  </head>
  <p id="usefloatnone"> Red paragraph </p>
  <p id="normal"> Normal paragraph </p>
  <p id="normal"> Normal paragraph </p>
  <p id="normal"> Normal paragraph </p>
</html>

红色段落使用clear:none：

#usefloatnone
{
  border: 1px dotted black;
  background-color: red;
  width: 1050px; height: 350px;
  
  float: none;  
}

#useclearnone
{
  border: 1px dotted black;
  background-color: red;
  width: 1050px; height: 200px;
  float: right;
  
  clear: none;
}

#normal 
{
  border: 1px dotted black;
  width: 1050px; height: 100px;
}

<p id="useclearnone"> Red paragraph </p>
  <p id="normal"> Normal paragraph </p>
  <p id="normal"> Normal paragraph </p>
  <p id="normal"> Normal paragraph </p>

您可以看到使用时clear: none和float: none现在的效果差异。我建议您首先彻底了解w3.org 社区的本教程的float概念。当您想要清除它们周围/（通常是左侧或右侧）的任何浮动元素时，您可以在元素上使用属性。clear clear

Answer 4

Float none 停止元素以停止环绕相邻的浮动子元素。默认情况下，所有元素都没有浮动。清除两个停止元素以从左侧或右侧环绕任何浮动子项。有关更多详细信息和实时示例，请访问我的教程 http://tutorial.techaltum.com/css_float.html。