当前位置：网站首页>Floating effect and characteristics

Floating effect and characteristics

2022-07-25 22:27:00 【Start】

1. What is floating ？

CSS Of Float（ float ）, Causes the element to move left or right , The elements around it will also rearrange .

Float（ float ）, Often used for images , But it's also very useful in layout .

2. The characteristics of floating

characteristic 1：

1: Floating elements are detached from the document stream , After the element leaves the document stream , No longer occupy the location of the document stream , The element below it will immediately move up

2: After the element floats , Elements will try to float to the top left or right of the page

3: Floating elements are not removed from the parent element by default

4: The floating element will not exceed its brother element , One side at most

5: If above the floating element is a block element without floating , The floating element cannot be moved up

characteristic 2:

Floating elements don't cover text , Text will automatically wrap around floating elements ,

So we can set the effect of text wrapping around the picture by floating

When the element is set to float , Will be completely detached from the document flow , Some characteristics of elements will also change

3. Break away from the characteristics of document flow

A block element ：

1: Block elements no longer monopolize one line of the page

2: The width and height of the block element are spread by the content

Inline elements ：

The floating inline elements are more like inline block elements , Because one line can show multiple , And the default width is the width of the content

summary ： When the element is set to float , Off stream , There is no need to distinguish between blocks and lines , More like inline block elements

The following is a simple layout made of floating

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        body{
            width: 900px;
            margin: 0 auto;
            /*  Premise fixed width  */
        }
        header{
            width: 100%;
            height: 100px;
            background-color: aqua;
            margin-bottom: 10px;
        }
        .div1{
            width: 300px;
            height: 300px;
            background-color: aquamarine;
        }
        .div2{
            width: 300px;
            height: 300px;
            background-color: black;
        }
        .div3{
            width: 300px;
            height: 300px;
            background-color: rgb(235, 15, 198);
        }
        .div1,.div2,.div3,footer{
            float: left;
        }
        footer{
            width: 100%;
            height: 300px;
            background-color: rgb(176, 235, 15);
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <header>

    </header>
    <main>
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </main>
    <footer>

    </footer>
</body>

原网站

版权声明
本文为[Start]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207190520302923.html