float浮动不清楚对块状元素的影响

最新推荐文章于 2023-11-27 22:34:19 发布

梦jenny

最新推荐文章于 2023-11-27 22:34:19 发布

阅读量1.4k

点赞数

分类专栏： CSS 布局文章标签：布局

本文链接：https://blog.csdn.net/lulalahappy123/article/details/45079089

版权

CSS 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

布局

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;
        padding: 0}
      /*  p{
            margin: 0;
            float: left;
        }*/
        ul
        {
            float:left;
            width:100%;
            padding:0;
            margin:0;
            list-style-type:none;
            background-color: red;
        }
        a
        {
            float:left;/*不加float a就是一个内联元素，加了float 就可以设置宽度了*/
            width:7em;
         /* display: block;*/
            text-decoration:none;
            color:white;
            background-color:purple;
            /*padding:0.2em 0.6em;*/
            border-right:1px solid white;
        }
        a:hover {background-color:#ff3300}
        li {display:inline;
            /*float: left;*/


        }
    </style>
</head>
<body>
<ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
</ul>
<div>在上面的例子中在上面的例子中在上面的例子中在上面的例子中</div>
<p>
    在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。
</p>

</body>
</html>

<a>inline元素，对于float:left的作用就是变成inline-block 目的是可以设置宽度等，因为inline元素不能设置宽度

对于li可以不用float :left了，因为本身display :inline 内联元素就是一行中一个挨一个布局的（float:left和display:inline的作用一样的。取其一即可）

对于父元素ul, 如果没有设置float:left，相当于一个空的块元素在页面上，

必须加上float:left

才占满DIV