本文详细解释了CSS浮动元素的层叠原理，通过实例说明浮动元素如何影响元素布局，包括浮动元素之间的关系、脱离标准流但保持文本流的影响，以及当元素宽度超出包含块时的动态调整。
一、元素浮动规则
本文紧接上篇文章来讲述第三个浮动的规则，即 浮动元素之间不能层叠；如果一个元素浮动而另一个元素已经在那个位置了，后面浮动的元素将会紧贴着前一个浮动元素，也就是左浮动找左浮动，右浮动找右浮动。
如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止。
浮动元素不能层叠
首先创建一个 HTML 页面，该页面中包含了三个 div.item，分别给它们设置宽高以及不同的背景颜色，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item {
width: 100px;
height: 100px;
}
.box1 {
background-color: #f00;
}
.box2 {
background-color: #ff0;
}
.box3 {
background-color: #0f0;
}
</style>
</head>
<body>
<div class="item box1">1</div>
<div class="item box2">2</div>
<div class="item box3">3</div>
</body>
</html>
在浏览器中打开 HTML 页面，效果如下：
先给这三个 div.item 全部设置左浮动，具体代码如下：
.item {
width: 100px;
height: 100px;
/*设置左浮动*/
float: left;
}
刷新浏览器，效果如下：
全部设置左浮动之后，三个盒子全部靠左边横向排列；虽然脱离了标准流，但是并没有出现层叠的现象，接着我们注释全部左浮动的设置，单独给 div.box1 设置左浮动，具体代码如下：
.item {
width: 100px;
height: 100px;
/*设置左浮动*/
/* float: left; */
}
.box1 {
float: left;
background-color: #f00;
}
刷新浏览器，效果如下：
给 div.box2 设置一个左外边距 20px：
.box1 {
float: left;
background-color: #f00;
margin-left: 20px;
}
刷新浏览器，效果如下：
div.box1 设置了浮动之后会脱离标准流，但是 div.box1 中的内容会占据位置，也就是并没有脱离文本流，所以 div.box2 的内容并没有占据 div.box1 的位置。
float 浮动的元素可以脱离标准文档流,摆脱块级元素和行内元素的限制,但是没有脱离文本流,因此仍然会占据位置,其他的文本内容会按照顺序继续排列。
接着给 div.box2 设置左浮动：
.box2 {
float: left;
background-color: #ff0;
}
刷新浏览器，效果如下：
同样的现象 div.box1 和 div.box2 脱离标准流，但是没有脱离文本流；接着给 div.box3 也设置左浮动：
.box3 {
float: left;
background-color: #0f0;
}
刷新浏览器，效果如下：
水平方向剩余的空间不够显示浮动元素则浮动元素将向下移动
我们先给三个 div.item 在外面嵌套一个 div.container：
<div class="container">
<div class="item box1">1</div>
<div class="item box2">2</div>
<div class="item box3">3</div>
</div>
然后给这个 div.container 设置具体的宽高和背景颜色：
.container {
width: 500px;
height: 500px;
background-color: #f0f;
}
刷新浏览器，效果如下：
接着我们在 div.container 中在增加一个 div.box4：
<div class="container">
<div class="item box1">1</div>
<div class="item box2">2</div>
<div class="item box3">3</div>
<div class="item box4">4</div>
</div>
并且给 div.box4 设置一个比较大的宽，这个四个 div.item 的宽加起来就会大于 div.container 的宽：
.box4 {
width: 200px;
height: 100px;
background-color: #00f;
}
刷新浏览器，效果如下：
给 div.box4 设置一个左浮动：
.box4 {
width: 200px;
height: 100px;
background-color: #00f;
float: left;
}
刷新浏览器，效果如下：
当全部设置了左浮动之后 div.item 的总的宽度超过了包含块的宽度，就会自动向下一行移动，直到有充足的空间显示为止，因此可以看到 div.box4 在下一行显示，因为第一行已经没有足够的空间来显示了。
扫一扫
2490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
