CSS浮動屬性與清除

在CSS中如何使用float屬性以及清除。

浮動在過去是一個非常重要的話題。

在許多黑客和創意的用法中，它是我們能夠真正實現一些布局的少數方式之一，與表格一起使用。在過去，我們經常將側邊欄左浮動，以便將其顯示在螢幕的左側並對主內容添加一些邊距。

幸運的是，時代已經改變，現在我們已經有了Flexbox和Grid來幫助我們進行布局，浮動回到了它最初的作用：將內容放置在容器元素的一側，並使其兄弟元素顯示在周圍。

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: right並相應調整填充，結果如下：

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標籤中有3個內聯圖像：

如果我們將float: left添加到這些圖像，結果如下：

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

我們將會得到以下結果：

如果將clear: left添加到圖像中，這些圖像將垂直堆疊而不是水平堆疊：

我使用了對clear使用了left值。它允許：

left 清除左浮動
right 清除右浮動
both 清除左右浮動
none（默認）禁用清除

tags: [“CSS”, “float”, “clearing”]