Floating of CSS layout mode (4)

Time:2021-7-20

Three patterns of CSS layout

Standard flow

Arranged according to the display mode of elements, it is called standard flow

float

It is mainly used for displaying multiple block level boxes on the same line

location

It is mainly used to locate the box to a certain position in the browser, which is often used later

The difference between inline block elements and floating

In line block elements can display elements on the same line, but there is a gap in the middle, and floating just solves this problem

Float

The element that sets the floating attribute is detached from the standard flow and moved to the specified location

The role of floating

  • Multiple block level boxes can be displayed on the same line
  • The box can be aligned left and right
  • Floating was first used to achieve image surround effect
Selector {float: attribute value;}

Floating of CSS layout mode (4)

Floating

Floating box will be off label, and does not occupy position

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            height: 200px;
            width: 200px;
            background-color: blue;
            float: left;
        }

        .box2 {
            width: 400px;
            height: 400px;
            background-color: brown;

        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

Floating of CSS layout mode (4)

The leakage of floating box

Floating box will leak the original position to the box of standard flow below, and will not occupy the position

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            height: 200px;
            width: 200px;
            background-color: blue;
            /*Floating boxes don't take up space. The space will leak to the box below*/
            float: left;
        }

        .box2 {
        
            width: 400px;
            height: 400px;
            background-color: brown;

        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

Floating of CSS layout mode (4)

Features of float

Floating property: floating box will change the display property of the element, which is similar to the in line block property, but there is no gap

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            height: 400px;
            width: 400px;
            background-color: blue;
            float: left;
        }

        .box2 {
            width: 400px;
            height: 400px;
            background-color: black;
            float: left;
         }

         .box3 {
            width: 400px;
            height: 400px;
            background-color: brown;
            float: pink;
            float: left;
         }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>

Floating of CSS layout mode (4)
Note: when the width of the parent element is not enough to accommodate the floating box, the floating box will start a new line

Floating summary

Floating of CSS layout mode (4)

Floating small details

A complete web page is completed by standard flow + floating + positioning

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav {
            width: 400px;
            height: 400px;
            border: 1px solid red;
        }

        .box1,
        .box2 {
            width: 200px;
            height: 200px;
            background-color: black;
            float: left;
        }

        .box2 {
            background-color: blueviolet;
        }

        .box3 {
            width: 400px;
            height: 200px;
            background-color: brown;
            float: left;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

Floating of CSS layout mode (4)

Floating case

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        .box {
            width: 800px;
            height: 800px;
            margin: 100px auto;

        }

        .left {
            width: 200px;
            height: 800px;
            background-color: red;
            float: left;

        }

        .right {
            width: 600px;
            height: 800px;
            float: left;

        }

        .right li {
            list-style: none;
            width: 140px;
            height: 395px;
            float: left;
            background-color: brown;
            margin-left: 10px;
            margin-top: 5px;
            font-weight: bold;
            color: wheat;
            line-height: 395px;
            text-align: center;


        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <ul class="right">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
</body>

</html>

Floating of CSS layout mode (4)

Navigation bar cases

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .banner {
                width: 760px;
                height: 150px;

                margin: auto;
            }

            .nav {
                width: 760px;
                height: 32px;
                background: url(image/nav_bg.jpg) repeat-x;
                margin: auto;
            }

            .nav li {
                list-style: none;
                float: left;
            }

            .nav li a {
                display: block;
                width: 80px;
                height: 32px;
                text-align: center;
                line-height: 32px;
                text-decoration: none;
                color: #40510A;
                background: url(image/button1.jpg);

            }

            .nav li a:hover {
                background: url(image/button2.jpg);

            }
        </style>
    </head>
    <body>
        <!--  The banner section begins -- >
        <div class="banner">
            <img>
        </div>
        <!--  End of advertisement


        <!--  The navigation section begins -- >
        <div class="nav">
            <ul>
                <li>The website navigation</a></li>
                <li>The website navigation</a></li>
                <li>The website navigation</a></li>
                <li>The website navigation</a></li>
                <li>The website navigation</a></li>
                <li>The website navigation</a></li>
            </ul>
        </div>
    </body>
</html>

Floating of CSS layout mode (4)

The relationship between floating element and parent element

The floating element does not press the border of the parent element, nor does it press the padding value of the parent element, and the floating box is aligned with the reference of the parent box

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 500px;
            height: 200px;
            background-color: red;
            border: 5px solid black;
            padding: 20px;
        }

        .son {
            width: 200px;
            height: 100px;
            float: left;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

Floating of CSS layout mode (4)

The relationship between floating elements and sibling elements

1. The floating box will only affect the standard flow box in the back, not the standard flow box in the front

2. If one box floats, other boxes should also float

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            border: 1px solid red
        }

        .son1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .son2 {
            width: 400px;
            height: 200px;
            background-color: green;
            float: left;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>

</html>

Floating of CSS layout mode (4)

Why clear floats?

The essence of clearing floating is to solve the problem that the height of parent element is 0 due to the floating of child element. After clearing the floating, the parent element will automatically detect the height of the floating child element. When the parent element has the height, it will not affect the following standard flow

Methods of clearing floating

Selector {clear: attribute value}; Clear: clear

Floating of CSS layout mode (4)

Additional labeling

Add a pair of empty tags to the last floating element, such as < div style = "clear: both;" ></ Div > and so on
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 800px;
            margin: auto;
            border: 1px solid red;
        }

        .box1 {
            width: 400px;
            height: 400px;
            background-color: green;
            float: left;
        }

        .box2 {
            width: 400px;
            height: 400px;
            background-color: black;
            float: left;

        }

        .box3 {
            height: 500px;
            width: 800px;
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="box1"></div>
        <div class="box2"></div>
        <!--  Add a pair of empty tags after the last floating element -- >
        <div style="clear: both;"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

Floating of CSS layout mode (4)

Advantages: easy to understand

Disadvantages: add a lot of meaningless tags, resulting in structural disorder

Add overflow: hidden to the parent

Syntax: overflow: hidden | auto | scroll
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 800px;
            margin: auto;
            border: 1px solid red;
            /*Add overlay hidden directly to the parent element*/
            overflow: hidden;
        }

        .box1 {
            width: 400px;
            height: 400px;
            background-color: green;
            float: left;
        }

        .box2 {
            width: 400px;
            height: 400px;
            background-color: black;
            float: left;

        }

        .box3 {
            height: 500px;
            width: 800px;
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

Advantages: easy to write code

Disadvantages: the hidden content cannot be displayed due to too much code
Floating of CSS layout mode (4)

Use the after pseudo element to clear floats

.clearfix::after {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            overflow: hidden;
        }

        .clearfix {
            *zoom: 1;
            /*Compatibility of IE6 and IE7*/
        }

Perfect, but compatible

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            
            padding: 0;
        }

        .clearfix::after {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            overflow: hidden;
        }

        .clearfix {
            *zoom: 1;
            /*Compatibility of IE6 and IE7*/
        }

        .nav {
            width: 800px;
            margin: auto;
            border: 1px solid red;

        }

        .box1 {
            width: 400px;
            height: 400px;
            background-color: green;
            float: left;
        }

        .box2 {
            width: 400px;
            height: 400px;
            background-color: black;
            float: left;

        }

        .box3 {
            height: 500px;
            width: 800px;
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <div class="nav clearfix">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

Floating of CSS layout mode (4)

Double pseudo elements to clear floats

grammar

.clearfix::before,
        .clearfix:after {
            content: "";
            display: table;

        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
            /*Compatibility of IE6 and IE7*/
        }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clearfix::before,
        .clearfix:after {
            content: "";
            display: table;

        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
            /*Compatibility of IE6 and IE7*/
        }

        .nav {
            width: 800px;
            margin: auto;
            border: 1px solid red;

        }

        .box1 {
            width: 400px;
            height: 400px;
            background-color: green;
            float: left;
        }

        .box2 {
            width: 400px;
            height: 400px;
            background-color: black;
            float: left;

        }

        .box3 {
            height: 500px;
            width: 800px;
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <div class="nav clearfix">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

Floating of CSS layout mode (4)

Summary of clearing floats

Floating of CSS layout mode (4)

Search web page with Ctrl + F

Basic knowledge of PS

Common image formats

  • jpg
  • gif
  • png
  • PSD: the special format of Photoshop

How to slice PS

  • Slicing with slicing tool
  • Slice with new layer
  • Slicing with auxiliary lines

Recommended Today

VBS obtains the operating system and its version number

VBS obtains the operating system and its version number ? 1 2 3 4 5 6 7 8 9 10 11 12 ‘************************************** ‘*by r05e ‘* operating system and its version number ‘************************************** strComputer = “.” Set objWMIService = GetObject(“winmgmts:” _  & “{impersonationLevel=impersonate}!\\” & strComputer & “\root\cimv2”) Set colOperatingSystems = objWMIService.ExecQuery _  (“Select * from […]