设置浮动无法浮动到上一个div的上面

最新推荐文章于 2021-09-10 09:30:45 发布

益达木咸醇

最新推荐文章于 2021-09-10 09:30:45 发布

阅读量1.6k

点赞数 2

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/weixin_45766506/article/details/106684813

版权

前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

今天又踩了一个坑，是我忘记了float样式的原本的效果了【哭】。
来看下代码：
html代码：

<body>
    <div class="box1"></div>
    <div class="box2">设置浮动只会影响后面元素的布局</div>
    <div class="box3"></div>
</body>

css代码：

        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            border: 1px solid yellow;
        }
        .box3{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }

这里没有给.box2设置浮动，效果如下图：

重新设置.box2的样式：

.box2{
            width: 100px;
            height: 100px;
            border: 1px solid yellow;
            float: left;
        }

效果：
在这里插入图片描述
可以看得出，float样式只会影响后面元素的布局，我之前做一个布局一直在想，我设置了float:left;为什么div浮动不上去呢，是我忘记了浮动的特性了，在此提醒自己，也希望有人看到这篇文章是能够解决您的疑惑。

益达木咸醇

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
设置浮动无法浮动到上一个div的上面

今天又踩了一个坑，是我忘记了float样式的原本的效果了【哭】。来看下代码：html代码：<body> <div class="box1"></div> <div class="box2">设置浮动只会影响后面元素的布局</div> <div class="box3"></div></body>css代码： .box1{ width: 2
复制链接

扫一扫

专栏目录