float: none和clear: none有什么区别

Question

我正在使用 float 和clear 做一些事情。我发现使用

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

。现在，后者可以是文档流的“in”，也可以是文档流的“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

时效果的差异。我建议您首先从 w3.org 社区的本教程中彻底理解

float

和

clear

 的概念。当您想要清除元素周围/（通常是左侧或右侧）的任何浮动元素时，可以在元素上使用 

clear

 属性。 

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

https://tutorial.techaltum.com/css_float.html

.

Answer 4