逆战班：css浮动的简单介绍
程序员文章站
2022-05-29 15:15:25
...
关于浮动属性的入门**
在讲浮动属性之前，首先我们先了解浮动属性的作用：
首先：我们写出一块代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.float{
width: 400px;height: 400px;background-color: #898989;margin: 0 auto;
}
.box{
width: 100px;
height: 100px;
background-color: #FF0000;
margin: 10px;
}
</style>
</head>
<body>
<div class="float">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
</body>
</html>
我们打开网页后 就呈现出如下图一样的效果
图中3个红色方块的排序是垂直向下排列的，假如说这不是你想要的效果，你想要让这3个红色方块水平向左排列，这个时候 我们就应该给他添加浮动属性
当我们给“box”加入“float：left；”之后， 它就呈现出了我们想要的效果
由此我们可以认识到： 浮动属性可以让元素一个挨着一个
当我只给“box1”添加浮动属性时会出现下图的效果
box1覆盖住了box2 但是当我们给这三个方块都添加浮动属性时 却是水平排列的，并未出现覆盖现象。
由此 我们又了解到：当浮动的框碰到包含框或者另一个属性的边框时才会停止移动
但是 当我们只想让box1和box2 在第一排排列，而又不想让box3 被覆盖
这就需要给box3添加清除浮动“clear：both”
如下图
以上就是关于浮动的简单介绍…
上一篇： ionic之样式bar-dark
下一篇： Spring的DI依赖注入（set注入）