前端开发CSS

浮动元素位于非浮动元素之前和之后的影响

CSS

浮动核心就一句话：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。

之所以写这篇文章，是因为刚开始学习前端的时候，在做2017年百度前端学院的小薇学院的任务三——三栏式布局时碰到了一个很疑惑的问题（任务图如下）
三栏式布局

由于当初对浮动的认识不够，我的想法是这样的：左边的元素左浮动，中间的元素加左右margin撑开，右边的元素右浮动（注意我描述这三个元素的顺序）。最初的代码如下所示：

1
2
3
4
5
<body>
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.left{
    width: 300px;
    height: 400px;
    background-color: green;
    float: left;
}
.main{
    height: 400px;
    background-color: yellow;
    margin: 0 320px 0 320px;
}
.right{
    width: 300px;
    height: 300px;
    background-color: orange;
    float: right;
}

然而效果图却出乎我的意料
右边的盒子被撑下来了
右边的盒子竟然别撑下去了，这和我之前的认知不符合啊。其实只要把中间的元素写在后面的就可以了

1
2
3
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>

带着这个问题，我们来看一下浮动元素对兄弟元素的影响

浮动元素位于非浮动元素之前

由前面的案例可以看出，当浮动元素left在非浮动元素main之前时。left会脱离文档流上移将main遮盖。
其实，不管main元素是块级元素还是内联元素，都会被它前面的浮动元素所遮盖，并且无法通过z-index属性改变他们的层叠位置，但它的内部文字和其他行内元素都会环绕浮动元素。

1
2
3
4
5
6
7
8
9
10
11
12
.left{
	width: 200px;
	height: 200px;
	background-color: green;
	float: left;
}
.main{
	height: 300px;
	width: 500px;
	background-color: orange
}
1
2
3
4
5
<div class="left"></div>
<div class="main">
	由前面的案例可以看出，当浮动元素left在非浮动元素main之前时。left会脱离文档流上移将main遮盖。其实，不管main元素是块级元素还是内联元素，都会被它前面的浮动元素所遮盖，并且无法通过z-index属性改变他们的层叠位置，但它的内部文字和其他行内元素都会环绕浮动元素。
	……
</div>

浮动元素位于非浮动元素之后

先说结论：如果浮动元素之前定义了一个兄弟元素，那么浮动元素会换行显示。
尽管浮动元素会尽可能地靠近父元素的顶部，但是如果有任意的非浮动的兄弟元素位于其之前，浮动元素便会被挤下去。无论这个兄弟元素是行内元素还是块元素。这就意味着如果我们定义一个浮动元素位于一个段落之前和之后，得到的结果是完全不同的。
这也可以解释了为什么把main元素放在后面的原因。这里就不再演示啦。

参考文章：

  1. float深入剖析
  2. （译）元素浮动那些事儿
分享到