Float Does Not Work in a Flex Container

float does not work in a flex container

The float property is ignored in a flex container.

From the flexbox specification:

3. Flex Containers: the flex and inline-flex display
values

A flex container establishes a new flex formatting context for its
contents. This is the same as establishing a block formatting context,
except that flex layout is used instead of block layout.

For example, floats do not intrude into the flex container, and the
flex container’s margins do not collapse with the margins of its
contents.

float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.

Instead, just use flex properties:

footer {    display: flex;    justify-content: flex-end;}

<footer>    <span>       <a>foo link</a>    </span></footer>

Making a flex item float right

You can't use float inside flex container and the reason is that float property does not apply to flex-level boxes as you can see here Fiddle.

So if you want to position child element to right of parent element you can use margin-left: auto but now child element will also push other div to the right as you can see here Fiddle.

What you can do now is change order of elements and set order: 2 on child element so it doesn't affect second div

.parent {  display: flex;}.child {  margin-left: auto;  order: 2;}

<div class="parent">  <div class="child">Ignore parent?</div>  <div>another child</div></div>

Flexbox next to a float -- why/how does it take up remaining space?

From the specification:

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents. Flex containers form a containing block for their contents exactly like block containers do. [CSS21] The overflow property applies to flex containers.

A regular div will do the same if you apply overflow to it (it will create a block formatting context)

.float {
  float: left;
  padding: 10px;
  background: rgba(0,255,0,.1)
}

.regular-div {
  padding: 10px;
  overflow:auto;
  background: rgba(0,0,255,.1);
}

.flexbox {
  display: flex;
  padding: 10px;
  background: rgba(0,255,255,.1);
}

.table {
  display: table;
  padding: 10px;
  background: rgba(255, 255, 0, .1);
}

<b>Example one: Float with a div next to it</b>
<div>
  <div class="float">
    I am floating left.
  </div>

  <div class="regular-div">
      I'm a regular div after the float.
      <br>My content should wrap around the float.
      <br>Look at it go!
      <br>Wow!
  </div>
</div>

<br><br>
<b>Example two: Float with a flexbox next to it</b>
<div>
  <div class="float">
    I am floating left.
  </div>

  <div class="flexbox">
      I'm a flexbox. I do not wrap the div, and I occupy the remaining space to the right.<br>
      Why does this happen?
      Can any other "display" do this?
  </div>
</div>

<br><br>
<b>Example three: Float with a table next to it</b>
<div>
  <div class="float">
    I am floating left.
  </div>

  <div class="table">
      I am a table.<br>
      I position myself like a flexbox<br>
      But I shrink to fit.
  </div>
</div>

flex box item float right is not working

To make a <div> element, whose parent is using display:flex, float to the right, you can add the CSS properties flex-direction: row; justify-content: flex-end to the parent, like the example below:

.about-us__left {    display: flex;    flex: 1;     flex-direction: row;    justify-content: flex-end;    background-image: url('https://s15.postimg.cc/t22lvakm3/image.jpg');    background-repeat: no-repeat;    height: 482px;}.about-us__leftdescription {    width: 50%;}

<div class="about-us">  <div class="about-us__left">    <div class="about-us__leftdescription">      <h1>About Us</h1>      <ul>        <li>Specjalizujemy się w outsourcingu kadry IT;</li>        <li>Zapewniamy możliwość współpracy ze starannie dobranymi ekspertami IT lub całymi ich zespołami;</li>        <li>Pracujemy zgodnie z zasadami biznesu Klienta, dbając o wysoki standard świadczonych usług;</li>        <li>Budujemy i utrzymujemy długotrwałe relacje, oparte na wzajemnym zaufaniu;</li>        <li>Wartości, jakimi się kierujemy to odwaga, efektywność rozwiązań technicznych, zaangażowanie, zadowolenie Klientów          i inwestowanie w kapitał ludzki;</li>        <li>Jesteśmy elastyczni w dostosowaniu się do technologii, modelu biznesowego oraz kryteriów finansowych naszych Klientów.          Ofertę przystosowujemy indywidualnie, aby sprostać szybko zmieniającym się warunkom i trendom rynkowym.</li>      </ul>    </div>  </div></div>

How to prevent a display:flex item from clearing the previous float?

Use position: absolute;

.floater{
    position: absolute;
    float:right;
    width: 200px;
    border:1px solid red;
}

Float right is not affecting the layout of my navbar

Floats really aren't the best way to do this anymore. Try flexbox!

* {
margin: none;
padding: none;
box-sizing: border-box;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

header nav {
  display: flex;
}

header nav p {
  margin: 0 10px;
}

<header>
  <h1 class="logo">Learn to code</h1>
  <nav>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
  </nav>
</header>

float-left not working in relative position

The float will not work with layout='fill'. Change it to either 'fixed' or 'intrinsic'. I recommend wrapping the Image tag into a div and making the div float. Try something like this.

<div className="bg-blue relative my-4 w-full rounded-2xl p-4 lg:basis-5/12">
      <div className="float-left mr-4">
        <Image src={'/' + icon} layout={'fixed'} height="120" width="120" />
      </div>
      <div>
        <h3>{title}</h3>
        <p>{paragraph}</p>
      </div>
    </div>

And to improvise it. You do not even need to use float. You can achieve same with flex. So if using float is not important you can do something like this

<div className="bg-blue my-4 flex w-full gap-4 rounded-2xl p-4 lg:basis-5/12">
      <Image src={'/' + icon} layout={'intrinsic'} height="120" width="120" alt="" />
      <div>
        <h3>{title}</h3>
        <p>{paragraph}</p>
      </div>
    </div>

How to float an element to the right in flexbox with multiple flex items

min-width is solution:

.flexbox {
      display: flex;
      flex-wrap: wrap;
    }
    .flexbox div {
      border: 1px solid #ddd;
      padding: 10px;
      box-sizing: border-box;
    }
    #item-1, #item-3 {flex: 1;}
    #item-2 {flex: 2;}
    @media(max-width: 768px) {
      #item-1, #item-3 {
        order: 1;
      }
      #item-2 {
        order: 2;
        border-top: 0;
        min-width: 100%;
      }
    }

    <div class="flexbox">
        <div id="item-1"></div>
        <div id="item-2"></div>
        <div id="item-3"></div>
    </div>

Float Does Not Work in a Flex Container