css关于子级盒子浮动与不浮动的覆盖关系

最新推荐文章于 2023-07-04 23:19:51 发布

牙吃多了

最新推荐文章于 2023-07-04 23:19:51 发布

阅读量1.2k

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_62641005/article/details/123032884

版权

问题：我们知道浮动经常使用在父级为标准流的盒子里面添加子级元素，需要注意的是，如果子级元素中存在一个浮动的话，那么其它的子级盒子都需要浮动，否则就会发生覆盖等问题了。

下面根据CSS和大家演示下

<body>
    <div>
        <div class="one">粉色</div>
        <div class="two">绿色</div>
        <div class="three">黄色</div>
    </div>
</body>

给这些盒子上设置

<style>
        /* 取消外边距和内边距 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 设置父级盒子 并且使其居中显示 */
        div {
            width: 400px;
            height: 300px;
            background-color: rgb(85, 82, 82);
            margin: 100px auto;
        }

        /* 让子代盒子具有雏形 */
        div>div {
            width: 90px;
            height: 90px;
            float: left;
            background-color: pink;
            margin: 0;
        }

        /* 上颜色 */
        .two {
            background-color: green;
        }

        .three {
            background-color: yellow;
        }
    </style>

然后给出浏览器下的示意图

这就是正常的浮动盒子与盒子之间紧紧靠在一起

现在我们取消绿色和黄色盒子的浮动

         /* 上颜色 */
        .two {
            background-color: green;
            float: none;
        }

        .three {
            background-color: yellow;
            float: none;
        }

效果如下：

通过检查方法可以发现取消浮动的盒子称为块级元素其中绿色方块被粉色方块压在下面，因为字体无处显示，出现文中的形态哈

在次实验，如果第一个不浮动，而是绿色和黄色浮动，那么绿色会漂浮覆盖掉粉色方格嘛？？

 .one {
            float: none;
        }

        .two {
            background-color: green;

        }

        .three {
            background-color: yellow;

        }

给出效果图：

原因:因为第一个块级元素，独占了一行，导致父级原本的区域就是被压缩了，要在压缩过后的区域浮动。

总结：

第一浮动其它的不浮动那么会发生覆盖现象

第一不浮动其它浮动第一个独占一行不发生浮动

牙吃多了

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
css关于子级盒子浮动与不浮动的覆盖关系

问题：我们知道浮动经常使用在父级为标准流的盒子里面添加子级元素，需要注意的是，如果子级元素中存在一个浮动的话，那么其它的子级盒子都需要浮动，否则就会发生覆盖等问题了。下面根据CSS和大家演示下<body> <div> <div class="one">粉色</div> <div class="two">绿色</div> <div class="three">黄
复制链接

扫一扫