CSS设置浮动为什么上不去？

最新推荐文章于 2022-10-06 13:07:29 发布

吃定彩虹938

最新推荐文章于 2022-10-06 13:07:29 发布

阅读量1.1k

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_56437504/article/details/126443880

版权

CSS中设置浮动上不去的原因：浮动不会影响前面的样式
我们的思路：在pink’代码块中设置一个green、一个orange，并通过浮动让他们在一排显示
代码：

 div{
   width: 200px;
   height: 200px;
   background-color: pink;
 }
 .left{
   width: 100px;
   height: 100px;
   background-color: green;
 }
 .right{
   float: right;  ~~*******************************~~
   width: 100px;
   height: 100px;
   background-color: orange;
 }
```效果如下：


![在这里插入图片描述](https://img-blog.csdnimg.cn/2768a40fe25a444a950b2134e552fbb1.png)
此时我们发现：橙色方块并没有到我们想象中的位置
原因简单点就是是：float只会影响到后面布局的样式，并不会影响前面设置好的样式
我们可以这样设置
```html
div{
   width: 200px;
   height: 200px;
   background-color: pink;
 }
 .left{
   float: left;
   width: 100px;
   height: 100px;
   background-color: green;
 }
 .right{
    float: right;
   width: 100px;
   height: 100px;
   background-color: orange;
 }



效果如下：
![在这里插入图片描述](https://img-blog.csdnimg.cn/de72b45a6fdf4c4e9ef280c8f73678e7.png)