逃离HTML（四）

最新推荐文章于 2024-10-11 02:34:01 发布

wwwwnby

最新推荐文章于 2024-10-11 02:34:01 发布

阅读量62

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_45803680/article/details/109707953

版权

浮动

今日份的第二弹来了，是浮动这个属性，这个属性可以帮我们做很多事，现在就让我们一起来看看吧。

float:left/right/both/none;

以上就是浮动的属性了。当什么时候会用到它呢，这里我们可以看看例子：
在这里插入图片描述
没错，就是导航栏的时候会用到，当然还有很多时候会用到浮动这一属性，但是我们就先说一种，其他的以后遇到了再说。
浮动这个属性的效果最开始是用来做文字环绕图片这一效果的，但是现在跟多的是用来对网页进行布局。废话少说，上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo{
            height: 200px;
            width: 200px;
            border: 1px solid;
        }
        .fir,.sec,.thi,.fou,.fif{
            width: 10px;
            height: 10px;
            border: 1px solid;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="demo">
        <ul>
            <li class="fir"></li>
            <li class="sec"></li>
            <li class="thi"></li>
            <li class="fou"></li>
            <li class="fif"></li>
        </ul>
    </div>
</body>
</html>

显示出来的结果是：
在这里插入图片描述
现在我们需要将这五个li横向排列能怎么做呢？没错，就是需要用到浮动。
在代码里加上float:left;试试看：

得到的结果果然是横向排列了。现在我们将小圆点去掉，顺便调个距离，使两个li之间不用排列那么密集。
在这里插入图片描述
就得到了上图所显示的那样，现在我们在大框里再放一个有背景色的小块。就得到了以下：

图像中明显出现了蓝色长方体，同时也发现了一个问题，蓝色小方块直接占据了li的位置，所以我们能够得到一个结论，就是浮动不需要占据空间。如果要想li浮动的同时并且占据空间，就需要用到清除浮动了，清除浮动的一个最简单的方法就是在父元素或者祖先中添加一个空元素，并在空元素中添加clear：left/right/both/none；display:block;content:"";我们添加了试试
在这里插入图片描述
对于这个结果，会不会很意外呢？可以很负责的告诉你，并没有错误，是因为浮动了的元素是超脱文本流，而下面的蓝色背景小块是普通文本流元素，两者都不在同一个平面，所以才会发生这样的问题，如果要使蓝色小块在li下面的话就需要让蓝色小块同样浮动或者让他定位到下方。而定位则是下一期要讲的，敬请期待叭