css中float的用法

float 屬性將元素浮動在頁面中，與相鄰元素並排顯示，不會影響常規串流佈局。 float 值為：left（左浮動）、right（右浮動）、none（清除浮動）。浮動元素影響內容溢位、間距和父容器高度。清除浮動的方法包括：清除屬性、浮動元素、overflow: hidden。

CSS 中float 的用法

##float 定義

CSS中的float 屬性將元素定位在它的內容盒之外，使其浮動在頁面中。浮動元素不會影響其他元素的常規流式佈局，而是與其相鄰的元素並排顯示。

float 值

float 屬性可以接受以下值：

• left：將元素浮動到容器的左側。
• right：將元素浮動到容器的右邊。
• none：清除浮動，使元素恢復到正常串流佈局。

用法

要浮動元素，請將float 屬性加入其樣式：

<code class="css">element {
  float: left;
}</code>

影響

浮動元素會影響其附近的元素：

• 內容溢出：浮動元素的內容可能會溢出與其相鄰的元素。
• 間距：浮動元素和相鄰元素之間可能會出現間距。
• 父容器高度：如果浮動元素的高度高於父容器，則父容器的高度將自動調整以容納浮動元素。

清除浮動

要清除浮動，可以使用下列方法之一：

• 清除屬性：將clear 屬性套用到元素，清除其所有浮動元素。
• 浮動元素：在浮動元素後面新增一個浮動元素，將浮動元素清除到新的行。
• overflow: hidden：將 overflow 屬性套用到父容器，將浮動元素隱藏在容器中。

實例

下面的程式碼建立一個有兩個浮動元素的容器：

<code class="html"><div class="container">
  <div class="element1">元素 1</div>
  <div class="element2">元素 2</div>
</div></code>

<code class="css">.container {
  display: flex;
}

.element1 {
  float: left;
  background: red;
  width: 100px;
}

.element2 {
  float: right;
  background: blue;
  width: 100px;
}</code>

輸出：

<code>元素 1 | 元素 2</code>

以上是css中float的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！