How do adjacent elements actually work around floated elements? CSS

Question

From the CSS Specification, I can gather that:

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist.

So it means that any non positioned, non floated adjacent elements around floated elements should act as if the floated element did not exist, right? And it works perfectly if the former element has no content. But once it has some text, the text appears below the floated element which it should not and should move under the floated element.

<head>
  <style>
  #left {
    float: left;
    width: 50%;
  }
  #right {
    width: 40%;
  }
  div {
    padding: 2px;
    background-color: brown;
  }
  section {
    margin-left: 5px;
    padding: 2px;
    background-color: dodgerblue;
  }
  </style>
</head>
<body>
  <section id="left">
    <h2>Content</h2>
    <p>Good stuff</p>
  </section>
  <div id="right">
    FOOBAR
  </div>
</body>

Here the text "FOOBAR" appears below the floated section, and does not move under. Even if we remove the width of the FOOBAR div, it appears right of the floated element and not under it.

How do adjacent elements actually work around floated elements. I have tried a lot of videos but none seem to explain it.

check this one, it may help you understand, it's almost the same situation : https://stackoverflow.com/questions/50888762/floating-elements-behavior/50888955#50888955 — Temani Afif, Jul 01 '18 at 11:47
as a side note, if you remove the width it will also appear under ... add opacity to the floated element and you will see — Temani Afif, Jul 01 '18 at 11:48
@TemaniAfif So the text and inline elements inside the 'div' will always tend to wrap around while the rest of the div will be pushed under the floated section? Also, what elements (an example) would not wrap around and would just get pushed under the floated section? — loramao, Jul 01 '18 at 12:52
yes almost this ... every text, inline element and inline-block element will wrap around float ... so basically any element without text,inline-block or image will be place under the float .. so I would say empty block element or block element that contains only block elements — Temani Afif, Jul 01 '18 at 12:58
@TemaniAfif Thanks a ton! You are a life saver. Continue your crusade :D — loramao, Jul 01 '18 at 15:59

score 0 · Answer 1 · answered Nov 25 '20 at 11:59

                                  YOUR ANSWER

A float element will never overlap inline elements , that is why FOOBAR is not displayed under the floated element. This is because float element was initially invented to give an effect of text wrapping around images and not overlapping them.

                   WHY AND HOW THINGS ARE DISPLAYED IN YOUR EXAMPLE ?

Every text is inside a line box in css. According to css specs a floated element may come between edge of a container and edge of a line box . In that case line box will accommodate as many words as it can inside it and give an effect of text wrapping the float element. In your case line box of FOOBAR can not accommodate FOOBAR inside it , besides floated element cause there is no space . So the line box breaks down below the floated element and hence FOOBAR is displayed inside its line box below the float. -

How do adjacent elements actually work around floated elements? CSS

1 Answers1