為什么“float-start”和“float-end”會斷開我的<span>元素與 div 的連接？</span>

Question

我正在運行 reactjs 並嘗試將float-start和float-end分別用於div左側和右側的 position “開始”和“結束” span元素。

我把它歸結為這個基本演示：

index.js ：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <div className="my-red-container">
      <span>things</span>
    </div>

    <div className="my-yellow-container">
      <span className='float-start'>left</span>
      <span className='float-end'>right</span>
    </div>
  </React.StrictMode>
);

index.css ：

.my-yellow-container {
  background-color: yellow;
}

.my-red-container {
  background-color: red;
}

當我使用npm start運行時，我希望看到一個紅色條表示“事物”，然后是一個黃色條表示左側的“左”和右側的“右”。 相反，我得到這個：

如果我像這樣將紅色 div 移動到黃色 div 下面：

    <div className="my-yellow-container">
      <span className='float-start'>left</span>
      <span className='float-end'>right</span>
    </div>

    <div className="my-red-container">
      <span>things</span>
    </div>

然后我希望得到一個黃色的條，左邊是“左”，右邊是“右”，下面是一個紅色的條，上面寫着“東西”。 相反，我得到這個：

但是當我向黃色 div 添加一個“未分類” span時，如下所示：

    <div className="my-yellow-container">
      <span>far left</span>
      <span className='float-start'>left</span>
      <span className='float-end'>right</span>
    </div>

    <div className="my-red-container">
      <span>things</span>
    </div>

然后我得到這個：

這就像float-start和float-end完全斷開了span與其包含的div的連接，然后所有文本都變得混亂了。

請幫忙。 我搞砸了什么？ 我顯然忽略了一些東西，但我不知道是什么。

Answer 1

float 屬性用於指定元素應如何在其父元素中浮動。 當您將 float 屬性應用於元素時，該元素將脫離文檔的正常流動並移動到其父元素的左側或右側。 這可能會導致其他元素表現得好像浮動元素不存在一樣，就好像該元素不占用任何空間一樣。

float 屬性的 float-start 和 float-end 值用於指定元素應浮動到父元素的哪一側。 float-start 值在從左到右的語言中將元素浮動到左側，而 float-end 值在從左到右的語言中將元素浮動到右側。

如果您已將 float 屬性應用於 span 元素並導致元素與父 div 斷開連接，則可能是因為 div 元素沒有設置寬度並且無法包含浮動元素。 您可以通過為 div 元素設置寬度或將 overflow: hidden 屬性應用於 div 元素以包含浮動元素來解決此問題。

浮動屬性也可能導致 span 元素與頁面上的其他元素重疊，這可能導致它看起來與 div 斷開連接。 在這種情況下，您可以嘗試將 clear 屬性應用於 div 元素，以防止它與浮動元素重疊。

下面是一個代碼示例

<style>
  .floated-element {
    float: float-start; /* or float-end */
  }
  .containing-element {
    width: 500px;
  }
</style>

<div class="containing-element">
  <span class="floated-element">This element will be floated to the left (or right) within the containing element</span>
</div>

在此示例中，將 float 屬性應用於值為 float-start 的 span 元素，這將使該元素在從左到右的語言中向左浮動。 包含元素的 div 設置了 500 像素的寬度，它將包含浮動元素。

如果您想改為將元素浮動到右側，則可以為 float 屬性使用值 float-end。

我希望這有幫助。 如果您有任何問題或需要進一步說明，請告訴我。

Answer 2

從以前的答案（在我將其標記為答案之前以某種方式被刪除）發現我必須將包含的div設置為此：

<div style={{ overflow: "hidden" }}>
...
</div>

這似乎可以解決問題。 這篇（現已刪除）的帖子解釋說，“浮動”有意斷開浮動子項與父項的尺寸限制的連接，但設置樣式overflow: "hidden"會迫使它們再次進入收容狀態。 我只想要float-start和float-end的“最左端”和“最右端”特性，所以我很好地強制它的子元素再次回到包含中。