float：none和clear：none之间有什么区别吗？

Question

我正在做一些使用浮动和清除的东西。我发现使用float: none;或clear: none;没有区别吗？任何人都可以通过一个例子来说明差异

Answer 1

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

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

Answer 2

他们是完全不同的两件事。

float会使元素在其父元素内对齐左侧或右侧（参数）。除非元素已经浮动，否则float: none什么都不做。浮动元素会自动填充宽度，并将其减小到可以达到的最小值。

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

以下是向您展示floats和clears做什么的插图。

Answer 3

似乎你不理解float所做的基本概念。分配给块级元素时，float除none之外的任何值都会将该元素从文档流中取出。假设您有两个不同的div元素，一个使用float:none，另一个使用clear:none。现在，后者可以是文档流中的 或文档流的 out - 具体取决于其浮点值。我给你举两个例子。在第一个版本中，红色段落使用float:none，在第二个版本中，红色段落使用clear: 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时，您可以看到效果差异。我建议您首先要彻底理解float和clear from this tutorial by w3.org community的概念。当您要清除/（通常是左侧或右侧）它们周围的任何浮动元素时，可以在元素上使用clear属性。

Answer 4

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