WEB前端开始学习 6.29

最新推荐文章于 2024-09-16 11:16:36 发布

LiangKJZ

最新推荐文章于 2024-09-16 11:16:36 发布

阅读量109

点赞数 1

文章标签：大数据 css

本文链接：https://blog.csdn.net/LiangKJZ/article/details/125528826

版权

本文探讨了CSS中高度塌陷的问题，这是由于元素浮动导致父元素无法正确计算高度而引发的布局混乱。文章提到了四种解决方法：固定父元素高度、开启BFC、在父元素底部添加空白div以及使用伪元素清除浮动。通过实例代码展示了具体应用，适合前端开发者复习和掌握。

摘要由CSDN通过智能技术生成

1.今天学习了高度塌陷，这是css浮动出现问题的应对方法，感觉没有完全理解，还需要认真深入复习，再掌握掌握。

2.高度塌陷是指设置元素脱离文档流，那就无法撑开父元素的高度，导致父元素的高度丢失使得页面布局发生混乱，主要有四种解决方法分别是将父元素高度固定住当开启元素的BFC以后，元素会变成一个独立的布局区域可以直接在高度塌陷的父元素的最后，添加一个空白的div 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动

<!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>
<link rel="stylesheet" type="text/css" media="screen"
    href="https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css">
<style>
    * {
        margin: 0;
        padding: 0;
    }

    a {
        color: rgb(153, 122, 168);
        text-decoration: none;
    }

    li {
        list-style: none;
        color: rgb(153, 122, 168);
    }

    div {
        width: 250px;
        height: 550px;
        background-color: rgb(255, 255, 255);
        border: 3px solid #eee;
    }

    h3 {
        margin: 20px;
    }

    ol {
        margin-top: 20px;
        margin-left: 20px;
    }

    li {
        margin: 10px 0;
    }

    span {
        float: right;
        margin-right: 10px;
    }
</style>

<body>
    <div>
        <h3>全部分类</h3>
        <ol>
            <li>
                <i class="icon ion-android-restaurant" style="color: orange;"></i> <a href="#">美食<span>&gt;</span></a>

            </li>
            <li><i class="icon ion-android-bicycle" style="color: orange;"></i> <a href="#">外卖<span>&gt;</span></a>
            </li>
            <li>
                <i class="icon ion-ios-home" style="color: rgb(92, 72, 36);"></i> <a href="#">酒店<span>&gt;</span></a>
            </li>
            <li>
                <i class="icon ion-ios-home-outline" style="color: orange;"></i> <a href="#">民宿<span>&gt;</span></a>
            </li>
            <li>
                <i class="icon ion-videocamera" style="color:red;"></i> <a href="#">猫眼电影<span>&gt;</span></a>
            </li>
            <li><i class="icon ion-plane" style="color:blue;"></i> <a href="#">机票</a>/<a href="#">火车票<span>&gt;</span></a>
            </li>
            <li>
                <i class="icon ion-mic-b" style="color:aquamarine;"></i> <a href="#">休闲娱乐</a>/<a href="#">KTV<span>&gt;</span></a>
            </li>
            <li>
                <i class="icon ion-card" style="color:aquamarine;"></i> <a href="#">生活服务<span>&gt;</span></a>
            </li>
            <li>
                <i class="icon ion-ios-rose" style="color:red;"></i> <a href="#">丽人</a>/
                <a href="#">美发</a>/
                <a href="#">医学美容<span>&gt;</span></a>
            </li>
            <li>
                <i class="icon ion-heart" style="color:red;"></i> <a href="#">结婚</a>/
                <a href="#">婚纱摄影</a>/
                <a href="#">婚宴<span>&gt;</span></a>
            </li>
            <li>
                <i class="icon ion-ios-body" style="color:red;"></i> <a href="#">亲子</a>/
                <a href="#">儿童乐园</a>/
                <a href="#">幼教<span>&gt;</span></a>
            </li>
            <li>
                <i class="icon ion-ios-football" style="color:blue;"></i> <a href="#">运动健身</a>/
                <a href="#">健身中心<span>&gt;</span></a>
            </li>
            <li>
                <i class="icon ion-ios-monitor-outline" style="color:aquamarine;"></i> <a href="#">家装</a>/
                <a href="#">建材</a>/
                <a href="#">家具<span>&gt;</span></a>
            </li>
            <li>
                <i class="icon ion-ios-book-outline" style="color:aquamarine;"></i> <a href="#">学习培训</a>/
                <a href="#">音乐培训<span>&gt;</span></a>
            </li>
            <li>
                <i class="icon ion-ios-medkit-outline" style="color:blue;"></i> <a href="#">医疗健康</a>/
                <a href="#">宠物</a>/
                <a href="#">爱车<span>&gt;</span></a>
            </li>
            <li>
                <i class="icon ion-ios-wineglass" style="color:aquamarine;"></i> <a href="#">酒吧</a>/
                <a href="#">密室逃脱<span>&gt;</span></a>
            </li>
        </ol>
    </div>

</body>

</html>