preface

Float layout: float layout: float layout: float layout

CSS layout: known height, 300px left, 300px right, adaptive center. This is the implementation (demo) :

<html>
<style type="text/css">
html* {margin: 0;
}
#wrap div{
  height: 300px;
}
#left{
  float: left;
  width: 300px;
  background-color: red;
}
#mid{
    text-align: left;
    background-color: yellow;
}
#right{
    width: 300px;
    float: right;
    background-color: blue;    
}
</style>
  <body>
    <div id = "wrap">
      <div id = "left"></div>
      <div id = "right"></div>
      <div id = "mid">Among the middle</div>
    </div>
  </body>
</html>
Copy the code

There are three questions:

    1. Why is mid placed after left and right? It does not fit the text flow layout from top to bottom, left to right?
    1. The width of mid is 100%. Why doesn’t the text run behind the left block?
    1. Are there any other features of the float layout?

With these questions in mind, I reread the MDN documentation on float layouts

The definition of float

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 surround it. This element is removed from the normal flow of a web page (document flow), although it remains partially fluid (as opposed to absolute positioning). – the MDN

There are several float features:

  • Along the left or right side of its container
  • Allow text and inline elements to surround it
  • Removed from the text stream

To solve the problem

1. Why is mid placed after left and right? It does not fit the document flow from top to bottom and left to right?

Answer: If mid is placed in the middle, it is as follows:

    <div id = "wrap">
      <div id = "left"></div>
       <div id = "mid">Among the middle</div>
       <div id = "right"></div>
    </div>
Copy the code

Render as follows:

<div id = "wrap"></div>
Copy the code

Create a wrap block with a height of 300px and a default width of 100%. Next render:

<div id = "left"></div>
Copy the code

Left block Its container is the wrap block, so it is placed to the left of the wrap and removed from the text stream without affecting subsequent non-float elements.

<div id = "mid">Among the middle</div>
Copy the code

Normal block elements, since left is a float element, do not participate in the text flow layout, so the mid block tiled, default width of 100%, when set the left background transparent, you can see the yellow mid block;

<div id = "right"></div>
Copy the code

The right block is also detached from the text stream. But the float layout has one thing: it is “not upper-left or upper-right” along the left or right side of its container. That is, the second row on which the right block is located, “the first row has been tiled with the mid,” is placed to the right.

2. The width of mid is 100%, why does the text not run behind the left block?

A: One feature of float that allows text and inline elements to surround it is that the text will normally lay out the newline, but the float block will be avoided.

3. What other features do float layouts have?

Z – index expires

Z-index can only be used in the same text stream. It cannot be Left by setting the Z-index of mid

Remove the floating

If you want a block element that’s not affected by this float; Just set clear: both

Float blocks overflow when they exceed the height of the container

BFC

As soon as the BFC property of the container is triggered, the container will be directly propped open by the float block. “Container is gray.”

Block format context

Afterword.

Float layouts are fantastic and are gradually being replaced by other layouts.