float

浮动元素是指其 float 属性的计算值为非 none 的元素。

由于 float 暗示使用块级布局，因此在某些情况下它会修改display值的计算值。

/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Global values */
float: inherit;
float: initial;
float: revert;
float: revert-layer;
float: unset;

float 属性指定为单个关键字，从下面的值列表中选择。

left

元素必须浮在其包含块的左侧。

right

元素必须浮在其包含块的右侧。

none

元素不能浮动。

inline-start

元素必须浮在其包含块的起始侧。对于 ltr 脚本，这是左侧，对于 rtl 脚本，这是右侧。

inline-end

元素必须浮在其包含块的结束侧。对于 ltr 脚本，这是右侧，对于 rtl 脚本，这是左侧。

float = 
  block-start      |
  block-end        |
  inline-start     |
  inline-end       |
  snap-block       |
  <snap-block()>   |
  snap-inline      |
  <snap-inline()>  |
  left             |
  right            |
  top              |
  bottom           |
  none             |
  footnote         

<snap-block()> = 
  snap-block( <length> , [ start | end | near ]? )  

<snap-inline()> = 
  snap-inline( <length> , [ left | right | near ]? )  

如上所述，当元素浮动时，它会从文档的正常流中移除（但仍然是其中的一部分）。它会向左或向右移动，直到接触其包含框的边缘，或另一个浮动元素。

在此示例中，有三个彩色正方形。两个浮动到左侧，一个浮动到右侧。请注意，第二个“左侧”正方形放置在第一个正方形的右侧。其他正方形将继续堆叠到右侧，直到它们填满包含框，然后它们将换行到下一行。

浮动元素至少与其最高的嵌套浮动子元素一样高。我们为父元素设置了 width: 100% 并将其浮动以确保它足够高以包含其浮动子元素，并确保它占用父元素的宽度，这样我们就不必清除其相邻同级元素。

HTML

<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique
    sapien ac erat tincidunt, sit amet dignissim lectus vulputate. Donec id
    iaculis velit. Aliquam vel malesuada erat. Praesent non magna ac massa
    aliquet tincidunt vel in massa. Phasellus feugiat est vel leo finibus
    congue.
  </p>
</section>

CSS

section {
  box-sizing: border-box;
  border: 1px solid blue;
  width: 100%;
  float: left;
}

div {
  margin: 5px;
  width: 50px;
  height: 150px;
}

.left {
  float: left;
  background: pink;
}

.right {
  float: right;
  background: cyan;
}

结果

有时您可能希望强制某个项目移动到任何浮动元素下方。例如，您可能希望段落保持与浮动元素相邻，但强制标题位于其自己的行上。有关示例，请参阅 clear。

• 块级格式化上下文
• 使用 clear 强制项目移动到浮动元素下方。