为什么“float-start”和“float-end”会断开我的<span>元素与 div 的连接？</span>

Question

I'm running reactjs and attempting to use float-start and float-end to position "start" and "end" span elements on the left and right side of a div , respectively.

I've boiled it down to this basic demo:

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;
}

When I use npm start to run this, I expect to see a red bar saying "things" followed by a yellow bar saying "left" on the left and "right" on the right. Instead I get this:

If I move the red div below the yellow div like this:

    <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>

Then I expect to get a yellow bar saying "left" on the left and "right" on the right, and below that a red bar saying "things". Instead I get this:

But when I add an "unclassed" span to the yellow div, like this:

    <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>

Then I get this instead:

It's like the float-start and float-end completely disconnect the span from it's containing div and then all the text gets jumbled.

Please help. What did I mess up? I've clearly overlooked something, but I don't know what.

Answer 1

The float property is used to specify how an element should float within its parent element. When you apply the float property to an element, the element is taken out of the normal flow of the document and moved to the left or right of its parent element. This can cause other elements to behave as if the floated element is not there, as if the element does not occupy any space.

The float-start and float-end values of the float property are used to specify which side of the parent element an element should float to. The float-start value floats the element to the left in left-to-right languages, and the float-end value floats the element to the right in left-to-right languages.

If you have applied the float property to a span element and it is causing the element to be disconnected from the parent div, it could be because the div element does not have a set width and is not able to contain the floated element. You can fix this by giving the div element a set width, or by applying the overflow: hidden property to the div element to contain the floated element.

It is also possible that the float property is causing the span element to overlap with other elements on the page, which can cause it to appear disconnected from the div. In this case, you can try applying the clear property to the div element to prevent it from overlapping with the floated element.

Below is a code Sample

<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>

In this example, the float property is applied to the span element with the value of float-start, which will float the element to the left in left-to-right languages. The containing-element div has a set width of 500 pixels, which will contain the floated element.

If you wanted to float the element to the right instead, you could use the value float-end for the float property.

I hope this helps. Let me know if you have any questions or need further clarification.

Answer 2

Discovered from a previous answer (that was somehow deleted before I could tag it as the answer) that I had to set the containing div to this:

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

This seemed to do the trick. The (now-deleted) post explained that "float" intentionally disconnects the floating child from the dimension restrictions of the parent, but setting the style overflow: "hidden" forces them back into containment again. I just wanted the "far left" and "far right" feature of float-start and float-end , so I'm fine forcing it the child element back into containment again.