关于设置ul左浮动没有水平显示

最新推荐文章于 2021-07-05 09:04:11 发布

无用之用%

最新推荐文章于 2021-07-05 09:04:11 发布

阅读量1.6k

点赞数 4

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/weixin_43966595/article/details/106368792

版权

前端学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天写代码遇到一个新手小白很容易犯的错误，反思了一下是自己基础知识掌握的不扎实，对一些小细节总是模棱两可。所以特意记录，以便时刻提醒自己。

首先先来看这样一种常见的无序列表样式：

<!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>
        ul {
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul>一级菜单
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
    </ul>
</body>

</html>

这是很简单的ul嵌套li的写法，为了更清晰的表达块级元素的含义，我特意给ul加了一个背景色，可以看出ul li都是块级元素，都是独占一行的

运行结果：
在这里插入图片描述
那么接下来我给ul设置设置浮动floa:left;

<style>
        ul {
            background-color: pink;
            float: left;
        }
    </style>

继续看运行结果：

在这里插入图片描述
其实看到结果一瞬间我满是黑人问号脸，此处省略一系列怀疑人生的呆滞表情。。。（为什么它没有我预期的各li元素水平排列成一行，而且ul li元素不是块级元素吗？？怎么成了靠内容撑开了？？）

冷静思考了一下。作为一个新手小白，还请各位原谅我作为基础不牢固导致的各种浮想联翩的奇怪的内心活动。

疑问一：css中三大特性之一的继承性,那么根据此特性，ul浮动，那li也相当于浮动了呀？这是怎么回事。。。我该面壁思过了，继承性是针对font-，line-，color-，text-家族的，float根本没有继承性好嘛。。。手动捂脸

疑问二：为什么各li元素没有水平排列成一行，那么这个问题也就很容易解释了，float是设置在ul标签下的，此时li标签并没有浮动特性

疑问三：为什么ul和li作为块级元素没有占满整行，当ul设置了浮动后，元素就会发生脱标，也就是脱离标准流，块级元素不再独占一整行，在不设置宽高的情况下，默认靠内容撑开。这里还要顺着思路继续验证一下当父元素设置了浮动，会对子元素产生怎样的影响：

测试代码如下：

<style>
        .fa {
            /* float: left; */
            background-color: pink;
        }
        
        .son {
            background-color: yellow;
        }
    </style>

<div class="fa">我是父元素啦啦啦啦啦啦
    <div class="son">我是子元素</div>
</div>

当给父元素加了浮动后运行效果如下：
在这里插入图片描述
当给父元素加了浮动后运行效果如下：

我们可以看到，确实加了浮动后父元素及其子元素，都受到了脱标的影响，由之前块级元素独占一整行的霸气，转变成了在未设置宽高时，由内容撑开。

所以再来理解疑问三，问题就不解自明了。

综上，总算是把所有疑问都解决掉了，明白了这些错误想法后，我为了继续理解浮动的问题，我又进行了简单的测试：

<!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>
        ul {
            float: left;
        }
        
        .one {
            background-color: pink;
        }
        
        .two {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <ul class="one">一级菜单
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
    </ul>

    <ul class="two">一级菜单
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
    </ul>
</body>

</html>

此时再来理解这段代码，看一下运行结果，应该和设想的一样：
在这里插入图片描述
说了这么多关于设置ul左浮动没有水平显示的一系列无厘头想法，似乎还是没有说到如何才能设置成功呢？

到现在这个问题是不是就很简单了，想给谁设置水平排列一行，给谁加浮动。准确定位，快狠准，哈哈。

<!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>
        li {
            float: left;
            list-style: none;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <ul>
        <li>七彩泡泡</li>
        <li>七彩泡泡</li>
        <li>七彩泡泡</li>
        <li>七彩泡泡</li>
    </ul>
</body>

</html>