今天又踩了一个坑,是我忘记了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浮动不上去呢,是我忘记了浮动的特性了,在此提醒自己,也希望有人看到这篇文章是能够解决您的疑惑。