写文章
  1. 码农之家首页
  2. 前端教程

小白零基础学习：浮动的特性

我心飞翔 • • 前端教程 • 阅读 3

浮动的特性一：浮动一般用于实现文字环绕的一个效果

小白零基础学习：浮动的特性

以下我将会给一个图片、及网页代码，需要你进行思考如何让文字实现文字环绕的效果。

<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>Document</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        .pic{
            width:200px;
            height:200px;
        }
        .pic img{
            width:100%;
        }
    </style>
</head>
<body>
    <div class="pic">
        <img src="https://img0.baidu.com/it/u=670068607,3062725755&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1680022800&t=4d2882d70654a478beffcd8e92fa9d20" alt="头像">
    </div>
    <div class="text">
        　中新网合肥3月27日电 (记者 吴兰)物理教育研究是物理学的一个新兴领域，特别是量子物理方面的教育研究，还处在方兴未艾的阶段。

　　记者从中国科学技术大学获悉，该校物理学院的涂涛副教授、李传锋教授、许金时教授和郭光灿院士等老师组成的团队，及时地关注和进入到这一新兴前沿领域。

　　物理教育研究领域有一个重要的研究方向，是从复杂性科学的视角进行分析。如果一个复杂的电路网络有很多个节点，不同节点之间或者有连接，或者没有连接。只有当这些节点都能以一个连接串联起来时，才达到所谓的渝渗阈值，整个电路网络才导通。

　　类似的，一个学生的思维神经网络也包含不同的节点，这些节点代表了特定物理领域中的不同知识片段。只有当所有的知识节点都以适当的方式通过一个正确关系相互连接时，学生的思维流程才会达到一个渝渗阈值，这时学生才能够正确地掌握相关物理知识，并正确处理相关物理问题。
</body>
</html>

小白零基础学习：浮动的特性

我们可以进行大胆尝试的，方法一

因为图片和文字都是块级元素，我们尝试如果把图片和文字都设置成行内元素。是否，样式就会出现成环绕的效果。ok，以下代码是第一次尝试。

        body{
            margin:0;
            padding:0;
        }
        .pic{
            width:200px;
            height:200px;
            display: inline-block;
        }
        .pic img{
            width:100%;
        }
        .text{
            display: inline;
        }
    </style>
效果展示

小白零基础学习：浮动的特性
我们可以发现，图片和文字确实在一行了，但是缺并不是我们想要的效果。所以第一种方法失败了。

那我进行第二次大胆的尝试，方法二

如果我们设置成弹性布局的话，是不是会让文字和图片变成我们想要的效果呢

    <style>
        body{
            margin:0;
            padding:0;
            display: flex;
        }
        .pic{
            width:200px;
            height:200px;
            display: inline-block;
        }
        .pic img{
            width:100%;
        }
    </style>
效果展示

小白零基础学习：浮动的特性
我们可以发现此时的图片变得非常小，并且文字也并不是我们需要的环绕样式。所以第二种方法也失败了。

那我们进行第三次大胆的尝试，方法三

这一次我们通过使用定位的属性，把文字定位在图片的右边，看看是否可以出现我们想要的效果。

    <style>
        body{
            margin:0;
            padding:0;
        }
        .pic{
            width:200px;
            height:200px;
        }
        .pic img{
            width:100%;
        }
        .text{
            position: absolute;
            top:0;
            left:200px;
        }
    </style>
效果展示

小白零基础学习：浮动的特性
虽然这次的图片大小正常了，可是文字依旧不能实现文字环绕的效果。

我们最终还是使用浮动的方法，方法四

我们给图片添加一个向左的浮动。

    <style>
        body{
            margin:0;
            padding:0;
        }
        .pic{
            width:200px;
            height:200px;
            float: left;
        }
        .pic img{
            width:100%;
        }
    </style>
效果展示

小白零基础学习：浮动的特性
通过使用浮动、我们最终实现了文字环绕的效果！

浮动的特性二：会造成元素脱离文档流,父容器的高度会塌陷

我们来看看以下代码带来的效果

<!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>Document</title>
</head>
<style>
    body{
        margin:0;
        padding: 0;
        /* font-size: 0; */
    }
    div{
        width:100px;
        height:100px;
        border:1px solid black;
        float: left;
    }
    .item1{
        background-color:red;
    }
    .item2{
        background-color:blue;
    }
    .item3{
        background-color:green;
    }
</style>
<body>
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>

    <p>hellow world</p>
</body>
</html>
效果展示

小白零基础学习：浮动的特性

此时我们来检查一下”hellow world”的位置，可以发现。之前的item1、item2、item3并没有在文档中显示出宽高，导致了父容器的高度塌陷。并且“hellow world”本应该在三个色块的下方的，却出现再了色块的右边，由此我们可以发现、这三个色块脱离了文档流。

小白零基础学习：浮动的特性

浮动的特性三:可以让行内元素可以设置宽高

看看以下代码

<!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>Document</title>
</head>
<style>
    span{
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
</style>
<body>
    <div class="container">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>
效果展示

小白零基础学习：浮动的特性
span标签原本是行内标签，即便给span标签添加宽高也不会发生变化。但是给了一个浮动属性，span标签脱离文档溜，从而可以添加样式

<style>
    span{
        width: 100px;
        height: 100px;
        background-color: yellow;
        float: left;
    }
</style>
效果展示

小白零基础学习：浮动的特性

浮动的特性四:浮动元素可以设置margin，但是不能设置margin: 0 atuo

我们现在来实现一个效果，要求要让黄色的色块到粉色色块的正中心。
1.来思考一下是否可以用margin：left or margin：right 来实现图片的改变。
2.来思考一下是否可以用margin：0 atuo 让黄色色块到粉色色块的正中心。

<!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>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }

    .container {
        width: 100%;
        height: 200px;
        background-color: pink;
        display: flex;
    }

    span{
        width: 100px;
        height: 100px;
        background-color: yellow;
        float: left;
        /* margin-left: 10px; */
        /* margin: 0 auto; */
    }
</style>
<body>
    <div class="container">
        <span>1</span>
    </div>
</body>
</html>
效果展示

小白零基础学习：浮动的特性

1.通过改动margin：right可以发现我们可以改动黄色的色块位置、进而我们可以通过具体的移动位移来改变黄色色块。
2.通过改变margin：0 auto 我们发现原本黄色的色块依然没有发生任何改变。
由此我们可以得出结论：在flot中我们依然可以使用margin但是却不能用margin: 0 auto;

最后通过上述的代码还可以总结出第五条规律：float可以让块级元素同行显示

原文链接：https://juejin.cn/post/7215866112846987319 作者：竹心君

赞 (0)
我心飞翔我心飞翔
0 0
上一篇 2023年3月30日 上午10:21
下一篇 2023年3月30日 上午10:32

相关推荐

发表回复

登录后才能评论