What was the original meaning of floating?

www.zhangxinxu.com/wordpress/2… We can use some other CSS properties (not considering table) instead of column layout or list arrangement. The only one that can’t be implemented is “text surround image”. I can’t think of any way to make text surround image display. Well, that’s what float is really all about.

The point of the float is to wrap the text around the image, that’s all

www.w3.org/TR/CSS22/vi… The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the ‘clear’ property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.

The most interesting feature of float is that the content flows along the float side (or the clear property disables the float effect). The content follows the right-hand layout of the left floating element. Follow the left side layout of the right float element. The point of view expounded here is related to Zhang Xinxu’s point of view. After the core is still floating, the content has a wrapping effect.

Float usage

CSS allows you to float any element, from images to paragraphs to lists. In CSS, this behavior is implemented using the property float. The float property defines in which direction the element floats. In the past this property was always applied to images to make text surround the image, but in CSS any element can float. The floating element generates a block-level box, regardless of what element it is. If you float non-replacement elements, specify an explicit width; Otherwise, they are as narrow as possible.

Note: If there is very little space to float an element on a row, the element jumps to the next row, and this process continues until a row has enough space.

value describe
left Element floats to the left.
right Element floats to the right.
none The default value. The element does not float and is displayed where it appears in the text.
inherit Specifies that the value of the float property should be inherited from the parent element.




Nature of float

Floating wrap

Example: width-adaptive buttons

<! DOCTYPEhtml>  
<html lang="en-US">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style type="text/css">
        .btn1 {
          display:inline-block; 
          background: green; 
          padding-left:3px; 
          color:# 000; 
          font-size:12px; 
          text-decoration:none;
        }

        .btn1 cite..btn2 cite {
          display:block; 
          line-height:26px; 
          padding:0 13px 0 10px; 
          background: yellow; 
        }

        .btn2 {
          float: left; 
          background: green; 
          padding-left:3px; 
          color:# 000; 
          font-size:12px; 
          text-decoration:none;
        }
        </style>
    </head>  
    <body>
        <a href="javascript:" class="btn1"><cite>Test float & Inline-block</cite></a>
        <br /><br />
        <a href="javascript:" class="btn2"><cite>Test float & Inline-block</cite></a>
    </body>  
</html> 
Copy the code

www.zhangxinxu.com/wordpress/2… The above example aims to show that the float property (either left or right) is in some sense exactly the same as the display:inline-block property, so it is similar to display:block; float:left; More than 95% of CSS code makes no sense (display:block is redundant). One of the reasons float can’t be the same as display:inline-block is because of the directionality of the float. Display :inline-block has only one horizontal direction, which is left to right, whereas float can be arranged from right to left. That’s the difference.

In fact, display:block; float:left; Basically, it doesn’t make sense.


What are the properties of inline-blocks?

Inline, block, and inline-block feature differences

  • inline:
    • Makes an element an inline element that has the properties of an inline element, that is, it can share a row with other inline elements rather than monopolize a row.
    • You cannot change the height or width of an element. The size is supported by the content.
    • Padding, margin left and right can be used to create margin effects, but top and bottom can’t.
  • block:
    • Make an element a block-level element that monopolizes a row, and the block-level element fills the parent element’s width by default without setting its own width.
    • You can change the height and width of an element.
    • You can set the padding, margin, top, left, bottom, and right attributes to create a margin effect.
  • inline-block:
    • It combines some of the features of inline and block. It combines the first feature of inline and the second and third features of block.
    • In layman’s terms, a block-level element that does not have a single row.


Difference between inline-block layout and float layout

<! DOCTYPEhtml>  
<html lang="en-US">  
    <head>  
      <meta charset="UTF-8">  
      <title>Document</title>  
      <style type="text/css">
        .parent..parent1 {
          width: 340px;
          border: 1px solid red;
          overflow: hidden;
        }

        .parent div {
          display: inline-block;
        }

        .parent1 div {
          float: left
        }

        .child1 {
          width: 100px;
          height: 100px;
          line-height: 40px;
          background: yellow;
        }

        .child2 {
          width: 100px;
          height: 200px;
          line-height: 100px;
          background: green;
        }
      </style>
  </head>  
  <body>
    <div class='parent'>
      <div class='child1'>
        child1
      </div><div class='child2'>
        child2
      </div>
      text
      <div class='child1'>
        child1
      </div><div class='child2'>
        child2
      </div><div class='child1'>
        child1
      </div>
    </div>
    <br />
    <div class='parent1'>
      <div class='child1'>
        child1
      </div>
      <div class='child2'>
        child2
      </div>
      text
      <div class='child1'>
        child1
      </div>
      <div class='child2'>
        child2
      </div>
      <div class='child1'>
        child1
      </div>
    </div>
  </body>  
</html> 
Copy the code

  • Inline-block will not leave the document flow, and float will leave the document flow, see below.
  • Float falls out of the document flow, causing the parent element to collapse in height and need to be handled through overflow
  • The inline-block element layout forms an anonymous block box, the range of which is shown below, and the current line arrangement is based on the baseline, and there is a gap between the child elements when the HTML tag is written with a newline.

  • Float elements do not generate anonymous block boxes, but BFC boxes, which do not affect each other.
  • Float layout a single-directional arrangement that does not cross existing floating elements in the direction. For example, the last element of child1 above. A blank area that does not precede the next-to-last child2 element.
  • Inline-block layouts and float layouts can achieve the same effect under certain conditions. Child element height same, baseline same.
  • For layout processing, use inline-block layouts or Flex layouts whenever possible. Use a floating layout unless you need text surround.


Display :block; float:left; For no reason

Juejin. Cn/post / 694508…

  1. If the ‘display’ value is’ none ‘and’ position ‘and’ float ‘are not set, the element does not generate a box.
  2. Otherwise, if the value of ‘positon’ is’ absolute ‘or’ fixed ‘, i.e. the box is absolutely positioned, the calculated value of ‘float’ is’ None ‘, and ‘display’ is set according to the table below. The position of the box is determined by ‘top’, ‘right’, ‘bottom’, ‘left’ and the containing block of the box.
  3. Otherwise, if the value of ‘float’ is not ‘None’, the box will float, and ‘display’ is set according to the table below.
  4. Otherwise, if the element is the root element, ‘display’ is set according to the table below.
  5. Otherwise, the remaining ‘display’ attribute values are the same as the specified values.
Specified value Computed value
inline-table table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block block
others same as specified

The third rule is that the element adds a float property, and the internal representation is evaluated basically as a block.

Floating destructiveness

Float destructiveness says that it destroys the current row of line boxes.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .block-level-box {
        /*float: left; * /
      }
    </style>

  </head>

  <body>
    <span>inline text</span>
    <img class="block-level-box" src="Https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2015%2F0107%2F1daf01ab3e6dc38c15e Fa15c4a6f7a40.jpg&refer=http%3A%2F%2Ffile02.16sucai.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1619604060 &t=58546a123e31a1c096d02cbc1ee72c4a" />
    <span>inline text</span>

  </body>
</html>

Copy the code





Modify the code to add a float property to the image

Assuming that the float does not destroy the inline box, the image will be displayed to the left, but it will form a new high envelope with the text and can only form a line box with one line of text, so it is necessary to break the inline box.

​

In the first picture above, you can see that. The image and two pieces of text are in the same line-box, so they have the same content height. When the text doesn’t fit, the content goes to the next line. When we set the image to float, the image breaks the original line-boxes. The text forms its own line-boxes.

Here you can see: www.w3.org/TR/CSS22/vi… Here’s an example:

Text flows normally up to the inner box, which is pulled out of the flow and floated to the right margin (its ‘width’ has been assigned explicitly). Line boxes to the left of the float are shortened, and the document’s remaining text flows into them.

The example here also shows that the line-box will get shorter.

There is no floating out of the document flow

Float elements are out of normal flow, but not out of text flow. As for the concept of text flow, it was mentioned in css2.2 in the float example, but not explained in depth. Google found a document HTML Document Flow and text flow.

  • Document flow: versus the box model
  • Text flow: relative to text

When an element floats, it jumps out of the flow of the document, meaning that while there is an element behind it, other elements are laid out directly under it, regardless of the area it occupies. The text, however, recognizes the area occupied by the floating element and is laid out around it, meaning that it does not jump out of the text stream. But with absolute positioning, not only the element box will exit the document stream, but the text will also exit the text stream. The text of the following element will not be in the region where it is identified, and will be laid out directly behind it, not around it.

Floating elements and absolute positioning contrast

www.programmersought.com/article/332…

(1) Floating will make the element separate from the document flow, but will not separate from the text flow, because the text content of other boxes still occupy the position when calculating the layout.

(2) Absolute positioning will make the element out of the document flow, but also from the text flow,

Translation:

  • Element, after setting the float property, jumps out of the document stream, but not out of the text stream. Because other boxes still evaluate the content portion of the float element when evaluating the layout
  • Absolute positioning jumps out of the document stream as well as out of the text stream.




Float details inside

www.w3.org/TR/CSS22/vi…

  1. The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.
  2. If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
  3. The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is next to it. Analogous rules hold for right-floating elements.
  4. A floating box’s outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.
  5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
  6. The outer top of an element’s floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.
  7. A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block’s right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
  8. A floating box must be placed as high as possible.
  9. A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.


  1. The left (or right) outer boundary of a floating element cannot exceed the left (or right) inner boundary of its containing block
  2. If a floating element is preceded by another element in the source document, the top of the floating element cannot be higher than the top of the generated box containing the element.
  3. The right outer boundary of a left floating element is not to the right of the left outer boundary of its right floating element. The left outer boundary of a right floating element is also not to the left of the right outer boundary of any left floating element to its left
  4. The outer top of the float box must not be higher than the top of the block it contains.
  5. The top of a floating element cannot be higher than the top of any previous floating or block-level element
  6. The outer top of the float box for the element must not be higher than the top of any row box that contains the box generated by the previous element in the source document.
  7. The left (or right) outer boundary of a floating element must be the right (left) outer boundary of a previously present left (or right) floating element in the source document. Unless the top of the last floating element is below the bottom of the first floating element
  8. Floating elements must be placed as high as possible
  9. A left floating element must go as far to the left as possible, and a right floating element must go as far to the right as possible. The higher it is, the farther it floats to the right or left


Floating element containing block

As you can see from the previous review, the float element behaves as a block, which I personally consider a block container box. That element contains the block according to the rule

Juejin. Cn/post / 694508… Rule 2: If the element’s position property is releative or static. The containing block is the nearest block-level box or the ancestor element that establishes the format context.

​

The contain block of a floating element is its nearest block-level ancestor. What does that mean here? Floating elements are not conducive to page layout, so we need to establish a floating range to define its boundaries. Find the block-level ancestor element, we can use the block-level ancestor element for layout processing, and then float in the current block-level element.

Rule 1: The left (or right) outer boundary of a floating element cannot exceed the left (or right) inner boundary of its containing block

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .block-level-box {
        float: left;
      }

      div {
        height: 600px;
        background: green;
        margin-top: 40px;
        padding-top: 40px;
        padding-left: 30px;
      }
    </style>

  </head>

  <body>
    <div>
      <img class="block-level-box" src="Https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2015%2F0107%2F1daf01ab3e6dc38c15e Fa15c4a6f7a40.jpg&refer=http%3A%2F%2Ffile02.16sucai.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1619604060 &t=58546a123e31a1c096d02cbc1ee72c4a" />
    </div>

  </body>
</html>

Copy the code



The contain block area of the floating element is the Content area.



Rule 2: If a floating element is preceded by another element in the source document, the top of the floating element cannot be higher than the top of the generated box containing the element.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .block-level-box {
        float: left;
        margin-top: 20px;
      }

      .block-level-box-1 {
        float: left;
      }

      img {
        max-width: 200px;
      }

      div {
        height: 600px;
        background: green;
        margin-top: 40px;
        padding-top: 40px;
        padding-left: 30px;
      }
    </style>

  </head>

  <body>
    <div>
      <span class="block-level-box">
        float span
      </span>
      <img class="block-level-box" src="Https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2015%2F0107%2F1daf01ab3e6dc38c15e Fa15c4a6f7a40.jpg&refer=http%3A%2F%2Ffile02.16sucai.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1619604060 &t=58546a123e31a1c096d02cbc1ee72c4a" />
      <img class="block-level-box-1" src="Https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2015%2F0107%2F1daf01ab3e6dc38c15e Fa15c4a6f7a40.jpg&refer=http%3A%2F%2Ffile02.16sucai.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1619604060 &t=58546a123e31a1c096d02cbc1ee72c4a" />
    </div>
  </body>
</html>

Copy the code



The top edge of the third box will be 20px higher because the first two floating elements add margin-top, which is also a block-level box.



Rule 3: The right outer boundary of a left floating element is not to the right of the left outer boundary of its right floating element. The left outer boundary of a right floating element is also not to the left of the right outer boundary of any left floating element to its left

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .block-level-box {
        float: left;
        margin-top: 20px;
      }

      .block-level-box-1 {
        float: right;
      }

      img {
        max-width: 200px;
      }

      div {
        height: 600px;
        background: green;
        margin-top: 40px;
        padding-top: 40px;
        padding-left: 30px;
      }
    </style>
  </head>

  <body>
    <div>
      <img class="block-level-box" src="Https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2015%2F0107%2F1daf01ab3e6dc38c15e Fa15c4a6f7a40.jpg&refer=http%3A%2F%2Ffile02.16sucai.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1619604060 &t=58546a123e31a1c096d02cbc1ee72c4a" />
      <img class="block-level-box-1" src="Https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2015%2F0107%2F1daf01ab3e6dc38c15e Fa15c4a6f7a40.jpg&refer=http%3A%2F%2Ffile02.16sucai.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1619604060 &t=58546a123e31a1c096d02cbc1ee72c4a" />
    </div>

  </body>
</html>

Copy the code







Negative margin

Negative margins cause floating elements to move outside the containing block.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .block-level-box {
        float: left;
        margin-top: -50px;
      }

      img {
        max-width: 200px;
      }

      div {
        height: 600px;
        background: green;
        margin-top: 40px;
        padding-top: 40px;
        padding-left: 30px;
        clear: both;
      }
    </style>
  </head>

  <body>
    <div>
      <img class="block-level-box" src="Https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2015%2F0107%2F1daf01ab3e6dc38c15e Fa15c4a6f7a40.jpg&refer=http%3A%2F%2Ffile02.16sucai.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1619604060 &t=58546a123e31a1c096d02cbc1ee72c4a" />
    </div>
  </body>
</html>

Copy the code




Floating overlap rule

What happens if a floating element overlaps with the normal remaining content? The following rules

  • When a line inner box overlaps with a floating element, its border background and content are displayed on top of the floating element.
  • When a block box overlaps with a floating element, its border and background are displayed below the floating element, and its content is displayed above the floating element.
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .main {
          width: 800px;
          height: 300px;
          border: 5px solid red;
          margin: 20px;
          background-color: green;
      }
       
      img {
          width: 200px;
          height: 100px;
      }
       
      .left {
          margin: 10px -15px 10px 10px;
          float: left;
      }
       
      strong {
          background-color: yellow;
          border: 1px gray solid;
          padding: 5px;
      }
       
      .footer {
          width: 300px;
          height: 200px;
          background: gray;
      }
    </style>
  </head>

  <body>
    <div class="main"> 
      <img class="left" src="Https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2015%2F0107%2F1daf01ab3e6dc38c15e Fa15c4a6f7a40.jpg&refer=http%3A%2F%2Ffile02.16sucai.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1619604060 &t=58546a123e31a1c096d02cbc1ee72c4a" />         
      <strong>To the elements within the</strong>
    </div>
  </body>
</html>
Copy the code

  • The first rule, this might not be easy to test, but you can test it with negative margins. We can see that the content associated with the text content, the border and the inner margin are already above the floating element.
  • In the second rule diagram you can see that the div with the gray background is at the bottom of the image.

​

​

Clear float

The parent element plus Overflow: hidden

Because overflow.hidden triggers the BFC.

BFC means that I, the offspring of the element, do not affect the layout of the external elements. But the float itself will cause the width of the line to be compressed, resulting in a text wrap effect. As a result, the wider the float element, of course, the less text that can fit in the line, the more lines of text, and the higher the document flow height. This affects the layout of its external elements.

So in the original sense of the BFC, the float element must be raised so that subsequent elements cannot share the same horizontal position as the float element. This is also a BFC feature. If you look at the height of the HTML, the float attribute will be included.

The float element is followed by a block element with a clear attribute

Elements after the both attribute ignore the float declaration of the previous element and do not fill in the gap

clear

  • Applies to: block-level elements Inheritance: None
  • None: Allows floating objects on both sides
  • Both: no floating objects are allowed
  • Left: Floating objects are not allowed on the left
  • Right: Floating objects on the right are not allowed

: after removing

.parent {
  zoom: 1;
}
.parent:after {
  display: block;
  content: ' ';
  clear: both;
  visibility: hidden;
}

Copy the code




summary

The guess (PS: the baseline is probably the Block box layer) is to add an anonymous block-level element containing a float element, but the first reason is to include the anonymous block-level element in the BFC element, and the second reason is to include the anonymous block-level element in the current parent element.

With reference to:

www.zhangxinxu.com/wordpress/2… www.w3.org/TR/CSS22/vi… www.programmersought.com/article/332…