css-让我们再深入一点看看ul-li结构里的浮动和绝对定位（float & absolute）

最新推荐文章于 2021-08-04 01:32:49 发布

weixin_34113237

最新推荐文章于 2021-08-04 01:32:49 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a3ad71a6fb9a0450f2217f1

本文通过实例详细解析了CSS中浮动和绝对定位的工作原理及如何正确使用这些布局方式解决实际问题，包括清除浮动的方法和绝对定位对浮动的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有哪里不懂的，请在下面留言，我每天都看，有时间我会一一解答，看评论区也许有人提出了跟你同样想问的问题，可以看看我给出的回答，不用重复提问。

浮动和绝对定位的基础知识网上随处可见，请自行查阅资料，本篇是帮助你在某场景下正确的用上你学到的知识、在莫名其妙前面找出问题所在、在做什么的时候可能会出现这样的问题、进一步的规范的css，本篇如出现错误，还劳烦请您在评论区指出，在此先表示感谢。

浮动里面的浮动

其实我们平时用的一些清除浮动的方法里面有一些叫做闭合浮动,此处不详解到底该叫清除还是叫闭合，请自行查阅相关资料
结构如图如代码所示，左右两个UL，一个浮左，一个浮右
基本概念，如果一个父元素的高度是由子元素所撑开的，父元素不做任何处理，子元素浮动，则父元素高度消失
一般水平导航的做法是用li里面的元素去撑开li的高度，li设置了浮动，ul在不做处理的情况下高度会消失，在这个示例里面，我们是有左右两个浮动的ul，所以这里不需要用.clearfix等方式再处理一遍，这里已经算是清除了浮动，因为float具有间接“包裹性”，包裹性相关资料请点击这里，首先明确一点，“包裹性”可以用来清除浮动，我之前写的YY游戏页面里面有讲到一小段float会隐式的改变display，让其变成inline-block，因为inline-block具有“包裹性”，然后这里的ul加上float之后高度没有消失，如果嫌绕，可以理解为，浮动里面有浮动，这个浮动的父元素高度不会消失。

<div class="container clearfix">
    <ul class="nav nav-1">
        <li><a href="#">爱你</a></li>
        <li><a href="#">爱我</a></li>
        <li><a href="#">爱她</a></li>
        <li><a href="#">绿帽</a></li>
        <li><a href="#">老王</a></li>
    </ul>
    <ul class="nav nav-2">
        <li><a href="#">爱你</a></li>
        <li><a href="#">爱我</a></li>
        <li><a href="#">爱她</a></li>
        <li><a href="#">绿帽</a></li>
        <li><a href="#">老王</a></li>
    </ul>
</div>
复制代码

* {
    margin: 0;
    padding: 0;
}

body {
    background: #E0FFFF;
}

ul,
li {
    list-style: none;
}

a {
    text-decoration: none;
}

.container {
    width: 1200px;
    background: #C1FFC1;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
}

.clearfix::after {
    display: block;
    content: '';
    clear: both;
}


/* -------------------- */

.nav-1 {
    float: left;
}

.nav-2 {
    float: right;
}

.nav li {
    float: left;
}

.nav li a:hover {
    background: #63B8FF;
}

.nav li a {
    display: inline-block;
    font-size: 16px;
    line-height: 16px;
    padding: 10px 20px;
    margin: 0 10px;
    background: #6495ED;
    color: #fff;
}
复制代码

绝对定位（absolute）的隐式改变

浮动的问题主要还是ul-li等结构里用得比较多，这里我用上一篇的例子进行详细讲解,css-3秒（大概吧...）快速撸出YY游戏页面（三）

在这里只讲解左半边的轮播图这个部分里面关于浮动的问题，这里的这个轮播图的实现方式的结构是ul-li结构，每个li里面放了图片和图片描述，给li设置浮动让五张图成一行排列，然后再给大盒子设置固定宽高和超出隐藏作为可视区域且设置relative，包含li的ul设置absolute再用JS来控制其left值来实现轮播效果。
在这里的重点在于，这里的实现轮播方式的html结构ul加上absolute，对于大部分还没有深入去查阅相关资料的初学者们可能会说：诶，你这个ul不是浮动的，那得再加个.clearfix吧？其实这里已经清除浮动了，用chrome调试工具鼠标移到这块，你可以看到这里虽然没有加.clearfix，但ul还是有高度的，这是因为这里的absolute清除了浮动影响，absolute和float一样会隐式的改变display，让其变成inline-block，如果上所说，inline-block具有包裹性，这里加上absolute之后就清除浮动了，你也可以手动试试单独给你想清除浮动的元素加上inline-block去验证一下，同样具有包裹性的还有一个是overflow:hidden;也可以清除浮动

<div class="banner fl">
    <ul class="banner_list">
        <li>
            <img src="images/banner/3.jpg" alt="">
            <div class="banner_fd">
                <h3>阿斯顿发撒的发撒的发是</h3>
            </div>
        </li>
        <li>
            <img src="images/banner/2.jpg" alt="">
            <div class="banner_fd">
                <h3>阿斯顿发撒的发撒的发是</h3>
            </div>
        </li>
        <li>
            <img src="images/banner/3.jpg" alt="">
                    <div class="banner_fd">
                <h3>阿斯顿发撒的发撒的发是</h3>
            </div>
        </li>
         <li>
            <img src="images/banner/4.jpg" alt="">
            <div class="banner_fd">
                <h3>阿斯顿发撒的发撒的发是</h3>
            </div>
        </li>
        <li>
            <img src="images/banner/5.jpg" alt="">
            <div class="banner_fd">
                <h3>阿斯顿发撒的发撒的发是</h3>
            </div>
        </li>
    </ul>
    <a href="" class="prev"></a>
    <a href="" class="next"></a>
</div>
复制代码

.banner {
    width: 497px;
    height: 246px;
    position: relative;
    overflow: hidden;
}

.banner_list {
    position: absolute;
    left: 0;
    top: 0;
    width: 500%;
}

.banner_list li {
    float: left;
    position: relative;
}

.banner_list img {
    width: 497px;
    height: 246px;
}

.banner_fd {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    background-color: #fff;
}

.banner_fd h3 {
    font: 14px/16px "Microsoft YaHei", "微软雅黑";
    height: 16px;
    border-left: solid 3px #DD3A29;
    padding-left: 8px;
    margin: 12px 9px;
}

.prev,
.next {
    width: 30px;
    height: 50px;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#7F000000', endColorstr='#7F000000');
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 50%;
    margin-top: -45px;
}

.prev {
    left: 0;
}

.next {
    right: 0;
}
复制代码