前端~浮动

zhangh040629

于 2024-09-04 15:57:29 发布

阅读量566

点赞数 11

文章标签：前端 css css3

本文链接：https://blog.csdn.net/zhangh040629/article/details/141896212

版权

浮动

如：

https://news.baidu.com/

div是块状元素，一个div都是独占一行,此时很多div元素在一排排列，就可以用到浮动，让竖着的盒子横着排列。

浮动属性

<!DOCTYPE html>
<html lang="en">
<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>浮动</title>
    <style>
        /* 
            float 浮动
                属性值：left 元素左浮动
                        right 元素右浮动
                        none 元素不浮动
            浮动之后不占位置
        */
        div{
            width: 200px;
            height: 200px;
        }
        .red{
            background-color: red;
            float: left;
        }
        .blue{
            background-color: blue;
            float: left;
            /* width: 300px;
            height: 300px; */
        }
        .green{
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</body>
</html>

多个元素浮动

<!DOCTYPE html>
<html lang="en">
<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>多个元素浮动</title>
    <style>
        /* 
            float 浮动
            很多个元素，一行排不下，换行往后排
        */
        div{
            width: 200px;
            height: 200px;
        }
        .red{
            background-color: red;
            float: left;
        }
        .blue{
            background-color: blue;
            float: left;
        }
        .green{
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="red"></div>
    <div class="blue"></div>
</body>
</html>

右浮动

<!DOCTYPE html>
<html lang="en">
<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>右浮动</title>
    <style>
        /* 
            float 浮动
            浮动后面会用于布局，比如一个元素在左边，一个元素在右边，就可以用浮动
            左浮动：谁先浮动谁在左边
            右浮动：谁先浮动谁在右边

            右浮动很多个元素，一行排不下，也是换行靠右往后排
        */
        div{
            width: 200px;
            height: 200px;
        }
        .red{
            background-color: red;
            float: right;
        }
        .blue{
            background-color: blue;
            /* float: right; */
        }
        .green{
            background-color: green;
            /* float: right; */
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</body>
</html>

特殊元素浮动

<!DOCTYPE html>
<html lang="en">
<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>特殊浮动</title>
    <style>
        /* 
            float 浮动
            不同大小的元素，一行不够不是另起一行，而是智能排序
            能节约就节约，见缝插针的原则
        */
        .red{
            width: 1000px;
            height: 1000px;
            background-color: red;
            float: left;
        }
        .blue{
            width: 800px;
            height: 800px;
            background-color: blue;
            float: left;
        }
        .green{
            width: 200px;
            height: 200px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</body>
</html>

文字

<!DOCTYPE html>
<html lang="en">
<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>文字</title>
    <style>
        /* 
            float 浮动
            浮动文字部分不会被挡住，文字会被挤出来
            可以利用这个让文字围绕一个元素的背景周边环绕
        */
        div{
            width: 200px;
            height: 200px;
        }
        .red{
            background-color: red;
            float: left;
        }
        .blue{
            background-color: blue;
            color: #fff;
            width: 300px;
            height: 300px;
        }
        .green{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="blue">你好</div>
    <div class="green"></div>
</body>
</html>

清除浮动

<!DOCTYPE html>
<html lang="en">
<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>清除浮动</title>
    <style>
        /* 
            高度塌陷
            上面外边的盒子高度变成了0, 加了浮动之后，不占据文档位置，下面的盒子就会上来。

            解决：
                1. 固定高度写死
                2. 清除浮动-加兄弟盒子身上，谁需要加谁身上
                    clear: none 允许浮动
                           /right 清除右浮动
                           /left  清除左浮动 
                           /both  清除所有浮动
                3. 给当前浮动元素后面补一个盒子，不设置宽高，加一个clear:both;属性
                4. overflow: hidden; 
                        会形成BFC,块格式化上下文,给当前元素的父盒子上加这个属性，
                        会自动计算内容需要占的高度，且不会影响其他元素
        */
        /* 方法一：固定写死高度 */
        /* .container{
            height: 200px;
        } */

        /* 方法四：加overflow: hidden; */
        .container{
            overflow: hidden;
        }
        .box1,.box2{
            width: 200px;
            height: 200px;
            float: left;
        }
        .box1{
            background-color: yellow;
        }
        .box2{
            background-color: blue;
        }
        .box3{
            width: 300px;
            height: 300px;
            background-color: green;
            /* 方法二：清除浮动-谁需要改变样式加谁身上 */
            /* clear: left; */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <!-- 方法三：给当前盒子后面补一个没有宽高的盒子,clear: left/both -->
        <!-- <div style="clear: both;"></div> -->
    </div>
    <div class="box3"></div>
</body>
</html>