A float.

1. The floating

Floating features:
  1. Floating elements are completely removed from the document flow and no longer occupy a place in the document flow
  2. Float the element to the left or right of the parent,
  3. Floating elements are not removed from the parent element by default
  4. A floating element moves left or right without passing other floating elements in front of it
  5. The floating element cannot be moved up if it is preceded by an unfloated block element
  6. A floating element is never taller than its floating sibling, or at most as tall

Summary: Float is currently used to allow elements on a page to be arranged horizontally. Float allows you to create horizontal layouts.

Floating elements do not cover the text, the text will automatically surround the floating elements, so we can use the float to set the text around the image.

Out-of-document flow features:

Block elements:

  1. Block elements do not occupy a line of the page
  2. When separated from the document flow, the width and height of the block elements are by default stretched out by the content

Inline elements: Inline elements become block elements when removed from the document flow, which behave like block elements

After leaving the document flow, there is no need to distinguish between blocks and lines

2. Page layout


<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        header.main.footer{
            width: 1000px;
            margin: 0 auto;
        }

        /* Set the header */
        header{
            height: 150px;
            background-color: silver;
        }

        /* Sets the body */
        main{
            height: 500px;
            background-color: #bfa;
            margin: 10px auto;
        }

        nav.article.aside{
            float: left;
            height: 100%;
        }

        /* Set the left navigation */
        nav{
            width: 200px;
            background-color: yellow;
        }

        /* Set the middle content */
        article{
            width: 580px;
            background-color: orange;
            margin: 0 10px;
        }

        /* Set the content on the right */
        aside{
            width: 200px;
            background-color: pink;
        }

        /* Set the bottom */
        footer{
            height: 150px;
            background-color: tomato;
        }
    </style>
</head>
<body>

    <! Create a header -->
    <header></header>

    <! Create web page body -->
    <main>
        <! -- Left navigation -->
       <nav></nav>

       <! -- In the middle -->
       <article></article>

       <! -- Right sidebar -->
       <aside></aside>

    </main>
    
    <! -- Bottom of page -->
    <footer></footer>
</body>
</html>

Copy the code

3. Height collapse and Block Formatting Context (BFC)

The problem of height collapse:

In a floating layout, the height of the parent element is supported by the quilt element by default. When the child element is floated, it will be completely separated from the document flow. When the child element is separated from the document flow, it will not be able to support the height of the parent element, causing the height of the parent element to be lost.

When the height of the parent element is lost, the elements below it automatically move up, resulting in a chaotic layout of the page.

So height collapse is a common problem in floating layout, this problem we must deal with!

Block Formatting Context (BFC) Block Formatting environment
  • BFC is an implicit property in a CSS that enables BFC for an element.

This element becomes a separate layout area when BFC is enabled.

Features of elements with BFC enabled:

  1. Elements with BFC enabled are not overwritten by floating elements
  2. The margins of child and parent elements of BFC enabled elements do not overlap
  3. Elements that enable BFC can contain floating child elements

There are some special ways to turn on elements’ BFC:

  1. Set element float (not recommended)
  2. Set elements to inline block elements (not recommended)
  3. Sets overflow for the element to a non-visible value

The common way to do this is to set elementsoverflow:hiddenTurn on its BFC so that it can contain floating elements

<style>
        .outer{
            border: 10px red solid;
             /* float: left; * /
             /* display: inline-block; * /
             overflow: hidden;
        }

        .inner{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
        }
    </style>
</head>
<body>

    <div class="outer">

        <div class="inner"></div>

    </div>

    <div style="width: 200px; height: 200px; background-color:yellow;"></div>
    
</body>
Copy the code

4.clear

clear

  • Action: Removes the influence of floating elements on the current element

  • Optional value:

    Left Clears the influence of the left floating element on the current element.

    Right clears the influence of the floating element on the current element.

    Both Clears the most influential side of both sides.

Principle:

When clear float is set, the browser automatically adds an upper margin to the element so that its position is unaffected by other elements.

<style>

    div{
        font-size: 50px;
    }

    .box1{
        width: 200px;
        height: 120px;
        background-color: #bfa;
        float: left;
    }

    .box2{
        width: 400px;
        height: 150px;
        background-color: #ff0;
        float: right;
    }

    .box3{
        width: 200px;
        height: 120px;
        background-color: orange;
    }
    
</style>
Copy the code

Box1, box2 float, box3 blocked by box1:

clear: right;
Copy the code

Clears box2 floating right:

clear: left;
Copy the code

Clear the effect of box1 floating left:

clear: both; The effect is the same as clear-Right.Copy the code

5. Use after pseudo-class to solve height collapse

<style>
    .box1{
        border: 10px red solid;
    }

    .box2{
        width: 100px;
        height: 100px;
        background-color: #bfa;
        float: left;
    }
    
    .box1::after{
        content: ' ';
        display: block;
        clear: both;
    }
    
</style>
Copy the code

6. Clearfix resolves both height collapse and margin overlap

Parent and child elements overlap margins:

<style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 100px;
        }

    </style>
</head>
<body>

    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
    
</body>
Copy the code

The ClearFix style can solve both height collapse and margin overlap. When you encounter these problems, you can use the ClearFix class directly.

   .clearfix::before..clearfix::after{
                   content: ' ';
                   display: table;
                   clear: both;
               }
Copy the code

The second Position.

Position

  • Positioning is a more advanced means of layout
  • Positioning allows you to place elements anywhere on the page
  • Use the position property to set the location

Optional value:

  • Static Default, element is static and positioning is not enabled
  • Relative enables the relative positioning of elements
  • Absolute Enables the absolute positioning of elements
  • Fixed Enables the fixed positioning of elements
  • Sticky enables sticky localization of elements

1. Relative positioning:

  • Element relative positioning is enabled when the element’s position property is set to relative

  • Characteristics of relative positioning:

    1. Elements with relative positioning enabled will not change if the offset is not set
    2. Relative positioning is positioned with reference to an element’s position in the document flow
    3. Relative positioning raises the level of an element
    4. Relative positioning does not take elements out of the document flow
    5. Relative positioning does not change the properties of the element block or block, inline or inline

Offset

  • When positioning is enabled on an element, the position of the element can be set by an offset. Top – The distance above the positioning element and the positioning position; Bottom – The distance below the positioning element and the positioning position.

  • The vertical position of the positioning element is controlled by the top and bottom attributes. Usually we only use one or the other.

  • The larger the value of top, the more the positioning element moves down

  • The larger the bottom value, the higher the positioning element moves up

Left – The distance to the left of the positioning element and position; Right-positioning element and the distance to the right of positioning position;

The horizontal position of the positioning element is controlled by the left and right attributes

Usually only one is used; – Left The larger the element is, the more rightward the element is. – Right the larger the element is, the more leftward the element is

<style>
    body{
        font-size: 60px;
    }
    .box1{
        width: 200px;
        height: 200px;
        background-color: #bfa;
    }

    .box2{
        width: 200px;
        height: 200px;
        background-color: orange;
        
        position: relative;

        left: 100px;
        top: -200px;
    }

    .box3{
        width: 200px;
        height: 200px;
        background-color: yellow;

    }
</style>
Copy the code

2. Absolute positioning

- When the position property of an element is set to absolute, the absolute positioning of the element is enabledCopy the code

  • Characteristics of absolute positioning:

    1. If the absolute location function is enabled, the position of the offset element does not change

    2. When absolute positioning is enabled, elements are removed from the document stream

    3. Absolute positioning will change the nature of the element, the inside of the line becomes a block, the width and height of the block is stretched by the content

    4. Absolute positioning takes an element up a level

    5. An absolute positioning element is positioned relative to its containing block

Containing blocks

  • Normally: the containing block is the closest ancestor block element to the current element

    hello

  • Absolutely positioned containing blocks:

The containing block is the closest ancestor element to which positioning is enabled,

If positioning is not enabled for all ancestor elements, the root element is its containing block-html (root element, initial containing block).

Child elements can be precisely positioned on the page.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            font-size: 60px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
            position: absolute;
            /* left: 0; top: 0; * /
            /*bottom: 0; * /
            /*right: 0; * /
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;

        }

        .box4{
            width: 400px;
            height: 400px;
            background-color: tomato;
            position: relative;
        }
        
        .box5{
            width: 300px;
            height: 300px;
            background-color: aliceblue;
             position: relative;
        }
    </style>
</head>
<body>

    <div class="box1">1</div>

    <div class="box4">
        4
        <div class="box5">
            5
            <div class="box2">2</div>
        </div>
    </div>
    <div class="box3">3</div>
    
</body>
</html>
Copy the code

3. Secure the positioning

Fixed positioning:

  • Setting the position attribute of the element to fixed enables the element to be fixed.

  • Fixed positioning is also an absolute positioning, so most of the characteristics of fixed positioning are the same as absolute positioning; The only difference is that the fixed location is always positioned with reference to the viewport of the browser, and the fixed location element does not scroll with the scroll bar of the web page.

Small AD 2:

4. Viscous positioning;

  • When the position attribute of an element is set to sticky, the sticky positioning of the element is enabled.

  • The characteristics of viscous localization and relative localization are basically the same, the difference is that viscous localization can be fixed when the element reaches a certain position

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>The navigation bar</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>

        body{
            height: 3000px;
        }
        
        /* Sets the size of the nav */
        .nav{

            /* Set the width and height */
            width: 1210px;
            height: 48px;
            /* Sets the background color */
            background-color: #E8E7E3;

            margin:100px auto;

            /* Sticky localization - Sticky localization is enabled when the position property of an element is set to sticky - Sticky localization has the same characteristics as relative localization, except that sticky localization can be fixed when an element reaches a certain position */

             position: sticky;
             top: 10px;

        }

        /* Set nav li */
        .nav li{
            /* Set li to float to the left so that the menu is aligned horizontally */
            float: left;
            /* Set the height of li */
            /* height: 48px; * /
            /* Center the text vertically in the parent element */
            line-height: 48px;

        }

        /* Set the style of a */
        .nav a{
            /* Convert a to a block element */
            display: block;
            /* Remove the underscore */
            text-decoration: none;
            /* Set the font color */
            color: # 777777;
            /* Change the font size */
            font-size: 18px;

            padding: 0 39px;
        }

        .nav li:last-child a{
            padding: 0 42px 0 41px;
        }

        /* Set the mouse cursor effect */
        .nav a:hover{
            background-color: #3F3F3F;
            color: #E8E7E3;
        }
    </style>
</head>

<body>
    <! Create navigation bar structure -->
    <ul class="nav">
        <li>
            <a href="#">HTML/CSS</a>
        </li>
        <li>
            <a href="#">Browser Side</a>
        </li>
        <li>
            <a href="#">Server Side</a>
        </li>
        <li>
            <a href="#">Programming</a>
        </li>
        <li>
            <a href="#">XML</a>
        </li>
        <li>
            <a href="#">Web Building</a>
        </li>
        <li>
            <a href="#">Reference</a>
        </li>
    </ul>

</body>

</html>
Copy the code

5. Absolutely position the layout of elements

Horizontal layout left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = The width of the content area containing the block

  • When we turn on absolute positioning:

    The horizontal layout equation requires adding left and right values,

    Now the rule is the same as before except for two more values:

    When excessive constraint occurs: if there is no auto among the 9 values, the right value is automatically adjusted to make the equation satisfied; If auto is present, the value of auto is automatically adjusted so that the equation is satisfied;

  • Margin Width left Right

  • Since the default values of left and right are auto, if left and right are not specified, the equation is not satisfied and the two values are automatically adjusted

    The equation for the vertical layout must also satisfy:

    Top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = the height of the contained block

6. Element hierarchy

For positioned elements, the hierarchy of the element can be specified using the Z-index attribute.

Z-index requires an integer as a parameter. The larger the value is, the higher the element level is, and the higher the element level is, the higher the value is displayed.

If the hierarchy of elements is the same, the lower elements are displayed first.

Ancestral elements do not overwhelm descendant elements at any higher level.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            font-size: 60px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            position: absolute;
            /* For positioned elements, you can specify the level of the element by using the z-index attribute. The z-index takes an integer as an argument. The larger the value, the higher the level of the element, the higher the level of the element, the higher the level of the element
             /* z-index: 3; * /
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: rgba(255 , 0.0.3);
            position: absolute;
            top: 50px;
            left: 50px;
            /* z-index: 3; * /

        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 3;

        }

        .box4{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
        }
    </style>
</head>
<body>

    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3
        <div class="box4">4</div>
    </div>

    
</body>
</html>
Copy the code