当前位置：网站首页>浮动效果与特点

浮动效果与特点

2022-07-19 05:21:00 【起ོ࿆始】

1.什么是浮动？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

2.浮动的特点

特点1：

1:浮动元素会脱离文档流，元素脱离文档流以后，不会再占用文档流的位置，它下边的元素会立即向上移动

2:元素浮动以后，元素会尽量向页面的左上或页面右上漂浮

3:浮动元素默认不会从父元素中移出

4:浮动的元素不会超过他上边的兄弟元素，最多最多一边齐

5:如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

特点2:

浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，

所以我们可以通过浮动来设置文字环绕图片的效果

当元素设置浮动以后，会完全脱离文档流，元素的一些特点也会发生改变

3. 脱离文档流的特点

块元素：

1:块元素不再独占页面的一行

2:块元素的宽高被内容撑开

行内元素：

浮动过后的行内元素更像行内块元素,因问一行可以显示多个，并且默认宽度为内容的宽度

总结：当元素设置浮动以后,脱离文档流，就不需要再区分块和行内,更类似行内块元素

下面是用浮动做的简单的布局

<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;
            /* 前提固定宽度 */
        }
        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>

原网站

版权声明
本文为[起ོ࿆始]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_62917168/article/details/125504269