div里的儿子ul li掉下和儿子div不掉区别

最新推荐文章于 2021-08-07 22:57:55 发布

weixin_46032763

最新推荐文章于 2021-08-07 22:57:55 发布

阅读量338

点赞数

本文链接：https://blog.csdn.net/weixin_46032763/article/details/108139369

版权

父块元素当中的一个子块元素无论两者怎么浮动，一个子块永远压住父块
由于父块宽不够导致儿子掉落是多个儿子中有浮动
当div宽度高度小于ul宽度高度：div里的儿子ul li掉下

<!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>
        * {
            padding: 0;
            margin: 0;
        }
        
        .box1 {
            width: 200px;
            height: 50px;
            background-color: pink;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
        
        li {
            float: left;
            width: 40px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="box1">
        <!-- <div class="box2"></div> -->
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

li.width=405=200刚好等于div宽度：

li.width=415>200刚好大于div宽度：
在这里插入图片描述
当div box1儿子为div box2，且box1比box2宽高都小不会掉落：

<!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>
        * {
            padding: 0;
            margin: 0;
        }
        
        .box1 {
            width: 200px;
            height: 50px;
            background-color: pink;
        }
        
        .box2 {
            width: 300px;
            height: 100px;
            background-color: skyblue;
        }
        
        li {
            float: left;
            width: 40px;
            height: 50px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
        <!--    <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul> -->
    </div>
</body>

</html>

在这里插入图片描述

weixin_46032763

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div里的儿子ul li掉下和儿子div不掉区别

当div宽度高度小于ul宽度高度：div里的儿子ul li掉下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sty
复制链接

扫一扫