CSS的浮动（二）

来源：互联网发布：八叉树优化编辑：程序博客网时间：2024/06/07 22:22

浮动的元素会互相贴靠。这里我们以3个div为例：

<body>

</body>

css样式中设置3个div都为左浮动，代码如下：

body{

font-size: 60px;

}

.box1{

float: left;

width: 100px;

height: 100px;

background-color: yellowgreen;

}

.box2{

float: left;

width: 120px;

height: 220px;

background-color: gold;

}

.box3{

float: left;

width: 340px;

height: 300px;

background-color: skyblue;

}

运行之后可以看到的效果：

在有足够的空间下，box3的div会贴近box2的div。如果没有足够的空间，那么会靠着box的div。如果没有足够的空间靠着box1的div，自己去贴左墙

如果是右浮动，float：right

关于浮动，对初学者来说，在使用中会经常出现问题，我们务必要记住一点永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。

0 0