CSS float属性和清除

如何使用`float`CSS中的属性并带有清除

过去，浮动是一个非常重要的话题。

它被用于许多技巧和创意用途，因为它是表格和我们可以真正实现某些布局的少数几种方法之一。过去，我们曾经将边栏浮动到左侧，例如，将其显示在屏幕的左侧，并在主要内容上添加了一些边距。

幸运的是，时代已经发生了变化，如今，我们有了Flexbox和Grid来帮助我们进行布局，而float已回到其原始范围：将内容放置在容器元素的一侧，并使它的兄弟姐妹出现在容器元素的周围。

这float属性支持3个值：

left
right
none（默认）

假设我们有一个框，其中包含带有一些文本的段落，并且该段落还包含图像。

这是一些代码：

<div class="parent">
  <div class="child">
    <div class="box">
      <p>This is some random paragraph and an image. <img src="https://via.placeholder.com/100x100" /> The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text.
      </p>
    </div>
  </div>
</div>

.parent {
  background-color: #af47ff;
  padding: 30px;
  width: 500px;
}
.child {
background-color: #ff4797;
padding: 30px;
}
.box {
background-color: #f3ff47;
padding: 30px;
border: 2px solid #333;
border-style: dotted;
font-family: courier;
text-align: justify;
font-size: 1rem;
}

和视觉外观：

如您所见，默认情况下，正常流程会考虑图像内联，并在行本身中为其留出空间。

如果我们添加float: left到图像，以及一些填充：

img {
  float: left;
  padding: 20px 20px 0px 0px;
}

结果是：

这就是我们通过应用float来得到的：正确，相应地调整填充：

img {
  float: right;
  padding: 20px 0px 20px 20px;
}

从页面的正常流程中删除一个浮动元素，其他内容在页面周围流动。

请参阅Codepen上的示例

您也不仅限于浮动图像。在这里，我们使用span元素：

<div class="parent">
  <div class="child">
    <div class="box">
      <p>This is some random paragraph and an image. <span>Some text to float</span> The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text.
      </p>
    </div>
  </div>
</div>

span {
  float: right;
  margin: 20px 0px 20px 20px;
  padding: 10px;
  border: 1px solid black
}

结果如下：

清算

当您浮动一个以上元素时会发生什么？

如果在浮动时找到另一个浮动图像，则默认情况下它们会水平堆叠在一起。直到没有空间，它们都将开始堆叠在新的行上。

假设我们在一个p标签：

如果我们添加float: left这些图像：

img {
  float: left;
  padding: 20px 20px 0px 0px;
}

这就是我们将要拥有的：

如果您添加clear: left对于图像，这些图像将垂直而不是水平堆叠：

我用了left的价值clear。它允许

left清除左浮球
right清除右浮动
both清除左右浮动
none（默认）禁用清除

免费下载我的CSS手册

CSS float属性和清除

如何使用floatCSS中的属性并带有清除

清算

更多CSS教程：

如何使用`float`CSS中的属性并带有清除