The document flow

Block-level elements in CSS are arranged in a single row on the page, from top to bottom, in what we call a flow, often referred to as a document flow or standard flow. Example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
 <html>
 <head>
     <style>
         div {width:100px;height:100px; }</style>
 </head>
 <body style="background-color: eee">
     <div style="background-color:red">div1</div>
     <div style="background-color:green">div2</div>
     <div style="background-color:blue">div3</div>
 </body>
 </html>
</body>
</html>
Copy the code

Clean (clear)

grammar
   clear: none | left | right | both value none: the default value. Floating objects are allowed on both sides. Left: no floating objects are allowed on the left. Right: no floating objects are allowed on the rightCopy the code
define

The clear property specifies which side of the element does not allow other floating elements.

Float

Grammar:
float: left; // Element floats to the left.float: right; // Element floats to the right.float: none; // Default value. The element does not float and is displayed where it appears in the text.float: inherit; // Specifies that it should be inherited from the parent elementfloatProperty value.Copy the code
Definition:

The floating element leaves the document flow and moves in the specified direction (left or right) until its outer edge touches either the parent or another floating element.

History:

Originally, the main purpose of the W3C’s float property was to wrap text around images, as shown in the following example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: 200px;
            display: inline;
            float: left;
        }
        p {
            color: red;
        }
    </style>
</head>
<body>
    <img src=".. /img/ sample image.jpg" alt="">

    <p>The text text text text text text text text Text text text text text text text word The text text text text text text text text The text text text text text text text text The text text text text text text text text The text text text text text text text text The text text text text text text text text The text text text text text text text text Text text text text text text text word The text text text text text text text text The text text text text text text text text The text text text text text text text text The text text text text text text text text The text text text text text text text text Text text text text text text text text text text</p>
</body>
</html>
Copy the code

Do not add the image floating effect:

Add a float effect:

Development:

Later, when someone used it for layout, it turned out to be the easiest way to create a multi-column layout. Example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
 <html>
 <head>
     <style>
         div {width:100px;height:100px; }</style>
 </head>
 <body style="background-color: eee">
     <div style="background-color:red; float:left;">div1</div>
     <div style="background-color:green; float:left;">div2</div>
     <div style="background-color:blue; float:right;">div3</div>
 </body>
 </html>
</body>
</html>
Copy the code

Once the floating element is removed from the regular document flow, the elements immediately following it rise up to the level of the floating element as space allows.

Masking problem: ascending elements will be covered by floating elements, because the floating elements are no longer on the same level as the standard flow. Examples are as follows:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
 <html>
 <head>
     <style>
         div {width:100px;height:100px; }</style>
 </head>
 <body style="background-color: eee">
     <div style="background-color:red; float:left;">div1</div>
     <div style="background-color:green;">div2</div>
     <div style="background-color:blue;">div3</div>
 </body>
 </html>
</body>
</html>
Copy the code

As you can see from the image above, the second div is covered by the first div, but the text inside is squeezed into the next line, as if the second div is invisible on the next line.

The solutionUse the clear attribute to clear the effects of the float. Note that clear is used on non-floating elements, not floating elements.The clear property does not allow the floating element to be cleared to the left/right of the floating element. The underlying principle is to add enough clearance space above or below the floating element.Example:

Problem two: parent element height collapse problem: Because the floating element is separated from the document flow, the parent element does not sense the presence of the child element, and the height disappears. Examples are as follows:

Solution 1: Clear the BFC floatAdd overflow: Auto or Overflow: Hidden to the parent element and set the parent element to auto or hidden, and the parent element will expand to include the float. This method has good semantics because it doesn’t require additional elements, but remember, The overflow property is not defined to clear up floats, so be careful not to overwrite content or trigger unwanted scrollbars.

Solution 2: ClearFixClearfix is used to clear floats

General scheme:

// Modern browser Clearfix solution does not support IE6/7
.clearfix:after {
    display: table;
    content: "";
    clear: both; } // Universal clearfix for all browsers // Zoom was introduced to support IE6/7
.clearfix:after {
    display: table;
    content: "";
    clear: both;
}
.clearfix{
    *zoom: 1; } // Universal clearfix for all browsers // Zoom was introduced to support IE6/7Clearfix :before,. Clearfix :after {display: table;content: "";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}
Copy the code

Floating usage scenario

1. Wrap the text around the picture

2. Page layout

3. Inline arrangement of multiple elements (inline-block is recommended)

Refer to the address: www.cnblogs.com/guanghe/p/1… www.jianshu.com/p/09bd5873b… Blog.csdn.net/qq_39406353… www.imooc.com/learn/121 www.w3school.com.cn/cssref/pr_c… Zhuanlan.zhihu.com/p/81091987 www.imooc.com/article/283… Blog.csdn.net/chenxi_li/a…

If my blog is helpful to you, if you like my blog content, please “like” “comment” “favorites” one key three even oh! I heard that the people who like 👉 👈 will not be too bad, every day will be full of vitality oh hey hey!! ❤️ ❤️ ❤️ Everyone’s support is my motivation to keep going. Don’t forget to follow 👉 👈 after you like me!

Personal wechat: iotzzh Public account: front-end wechat personal website: www.iotzzh.com