Written in the book of the former

This time record a piece of CSS code that suddenly confuses me. This is mainly because CSS has not been well understood and suddenly there is a very common floating situation that can not be explained by existing knowledge, so look to the specification for the answer.

Welcome to pay attention to my blog, irregularly updated —

MDN for floating interpretation

The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).

There are three main concerns:

  • Float elements are placed along the left or right side of the container
  • Text is surrounded by inline elements
  • Out of document flow, but still partially liquid.

I’m still confused after reading this paragraph. The main puzzle is how to say “partial liquidity”? Isn’t it already out of the document stream? In my previous understanding of float, I think there are two general float cases:

  <div class="red left"></div>
  <div class="green"></div>
Copy the code

<div class="red left"></div>
  <div class="green">As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</div>
</body>
Copy the code



This is what I had previously understood about “out-of-document flow” and “text-wrap” as defined by the float feature. As for the “keep some liquidity” thing, I thought it was far away from me and I didn’t care. Until..

It’s a very simple piece of code that confuses me.

<div class="left"></div>
<div class="center">
    some content fits or there are no more floats present.
</div>
Copy the code

This is an ordinary piece of code. The floating element is removed from the flow of the document, and the element below is unrecognized and takes its place, while the text is recognized, so it has a wrap effect. When I invert the two elements.

<div class="center">
    some content fits or there are no more floats present.
</div>
<div class="left"></div>
Copy the code



My understanding has always been that floating elements leave the document flow! But why isn’t it at the apex now? This is exactly what I left out in my previous interpretation of MDN. (Actually I think MDN is not clear. So writing stupid I can’t understand what it means.)

What am I missing from the definition of float

though still remaining a part of the flow (in contrast to absolute positioning).

Well, the documentation is pretty clear. I left out some floating liquidity. And what is this liquidity? Let’s look at the specification I’ve been looking for “a long time” :

What more does the specification define float than MDN? The order! Let’s take a look at how the specification addresses floating elements:

  1. Layout according to normal flow first
  2. Exit the document stream and head left or right

The key point I missed is that part of the flow is that floating elements are laid out in a normal flow first.

So you can see why the results in the previous picture are like this.



Floating elements are laid out according to Normal Flow and then out of document flow. We can only go left or right after we break away. It is true that the above element does not know the floating element at that time, but the floating element is already positioned and can only move left and right.

summary

At this point we can see that the floating element does move out of the document flow, but the part of the flow that differs from absolute positioning is that it is first laid out out of the normal document flow. Then you can fly away from the document stream. Unlike absolute location, where do you like the flow of documents, I only care about the superior relative/absolute 🙂

The resources

  • The CSS specification

The last

The blog of Po author is updated from time to time – if you have any questions, please feel free to share them under issues.