【css-浮动的简介和特点-尚硅谷源代码】

最新推荐文章于 2024-05-08 15:05:20 发布

chenshuangzhi

最新推荐文章于 2024-05-08 15:05:20 发布

阅读量107

点赞数

文章标签： html 前端 css 学习

本文链接：https://blog.csdn.net/chenshuangzhi/article/details/126195659

版权

一、浮动的简介
二、浮动的特点

一、浮动的简介

通过浮动可以使一个元素向其父元素的左侧或右侧移动

        通过float属性来设置元素的浮动

                可选值：

                        none 默认值，元素不浮动

left 元素向左浮动

right 元素向右移动



注意：

        元素设置浮动以后(只要不是none 就是设置了浮动)

                此时水平布局的等式便不强制成立

        元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，

                所有元素下边的还在文档流中的元素会自动向上移动。

        元素浮动可以横向排列

        浮动的特点:

1.浮动元素会完全脱离文档流，不再占据文档流中的位置

2.设置浮动以后元素会向父元素的左侧或者右侧移动

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

4.浮动元素向左或向右移动时，不会超过它前边的其他浮动元素（这里说的前边是指html结构的位置)

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

6.浮动元素不会超过它上边的浮动元素，最多就是和他一样高

        简单总结：

浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，

通过浮动可以制作一些水平方向的布局

<!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>

    /* .box0{
            width: 800px;
            height: 800px;
            background-color: palegoldenrod;
            margin: 130px auto;
        } */
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float: left;
        }

        .box2{
            width: 600px;
            height: 200px;
            background-color: orange;
            float: right;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box0">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

二、浮动的其他特点

元素设置浮动以后，将会从文档中脱离，从文档中脱离后，元素的一些特点也会发生变化

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

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

脱离文档流的特点：



块元素：

        1.块元素不在独占页面的一行

        2.脱离文档流之后，块元素的宽度和高度默认都被内容撑开。（在不设置宽高的情况下，如果没有内容，那么这个块元素就不会显示出来）

行内元素：

        行内元素脱离文档流以后会变成块元素，特点和块元素一样。（在不设置宽高的情况下，如果没有内容，那么这个块元素就不会显示出来）

        脱离文档流之后，就不需要再区分块元素和行内元素了

<!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>
        span{
            /* 行内元素脱离文档流以后会变成块元素，特点和块元素一样。 */
            float: left;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: orange;
            float: left;
            /* 
                浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，
                    所以我们可以利用浮动来设置文字环绕图片的效果
            */
        }

        .box2{
            background-color: blueviolet;
        }

        .box3{
            background-color:yellow;
        }
        
    </style>
</head>
<body>
    <span class="z1">hhhh</span>
    <div class="box1"></div>
    <p>《匆匆》是朱自清写的一篇散文，作者通过吃饭、洗手、遮挽、睡觉等日常生活细节来说明了时间
        在不经意间一去不复返了，表达了朱自清对时间流逝和生命短暂的叹惋和思考。
        看完这篇散文之后，我的脑海一片空白。或浒，我的反应和朱自清是一样的。我常常认为，人的一
        生很长很长，为我们的时间有很多很多，可是，悄悄地算着，人的一生不过最多三万多天，现在，有
        四千多日子从手中消失了，到现在，我连时间的半点影子都没瞧见。举几个例子吧：童年生活的美时
        光已从我们身边溜走了，不知道多少时候我们沉浸在童年的无限美好之中；我们曾见天真的以为，达
        六年的小学生会很久以后才结束，这不，一眨眼，我们便站在了小学生涯的尽头了我也常常在想，
        时间到底逃去了哪儿？是风儿把它吹到了天涯海角？还是雨滴把它洒遍了四方？还是薄雾将它带到某
        个地方…不知不觉中，时间又在我的遐想中流失了时间总是那样留不住，停不住。它伸出无形的
        双手，冷漠的将日历一页一页地往后翻，人们无论用任何力量都无法锁住这双手。不管是面壁十年是
        昙花一现，在它手中，只是轻轻的一瞬间而已。
        时间这条长河，无人能控制它永恒的流动，天地宇宙是它的流域，浩瀚人心是它的河床。该去的留
        不住，该来的阻止不到！由此可见，时间是多么的短暂与宝贵啊！
        时间长河缓缓而飞速地流动着，于是一玩要的时候，日子从笑声中溜去；写字的时候，日子从
        笔尖流过；看书的时候，日子它灵巧敏捷地从一行行字中穿过；跑步的时候，它又随着轻快的脚步远
        了..时间总在不经意间中消失了.就如朱自清的感慨吧！我们的日子一去不复返了！
        我不知道，人们是怎样看待时间的！有的人不放过一分一秒，努力闯出一番大事业来；而有的人
        呢？常常沉迷于网游、赌博中，浪费着自己的花样年华。前者是真正想在有限的时间里多做一些有义
        的事，才会如此珍惜时间；而后者，是完全没有意识到时间匆匆无影无声，所以，才会沉迷于其在法
        自拔！</p>
    <div class="box2">hello</div>
    <div class="box3">hello</div>
</body>
</html>

此文章跟随尚硅谷老师学习后自行练习，仅用于自己学习使用