浮动


最近在学浮动的知识,下面总结了一些浮动的一些特征

1. 块级元素浮动将并排显示,不再独占一行

示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box2{
width: 100px;
height: 100px;
border: 1px solid #ccc;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box2"></div>
<div class="box2"></div>
</body>
</html>

效果:

修改:

1
2
3
4
5
6
7
8
9
<style>
.box2{
width: 100px;
height: 100px;
border: 1px solid #ccc;
background-color: skyblue;
float: left;/*新增*/
}
</style>

修改效果:

2. 内联样式浮动就可以设置宽高,不仅能够支持margin-left(right),而且也支持margin-top(bottom)

示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box2{
width: 20px;/*无效*/
height: 70px;/*无效*/
border: 1px solid #ccc;
margin-top: 20px;/*无效*/
padding: 100px 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<span class="box2"></span>
<span class="box2"></span>
</body>
</html>

效果:

修改:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
*{
margin: 0;
padding: 0;
}
.box2{
width: 20px;/*生效*/
height: 70px;/*生效*/
border: 1px solid #ccc;
margin-top: 20px;/*生效*/
padding: 100px 30px;
background-color: skyblue;
float: left;/*新增*/
}
</style>

修改效果:

3. 浮动元素脱离正常的文档流,普通元素会占据浮动元素的位置

从上图可以看出,默认三个设置了宽高的block元素,本来会格子独占一行;如果框1设置了向左/向右浮动,他会忽略框2和框3,直到碰到父元素;同时也存在盖住普通元素的风险。

4. 浮动会导致父元素高度坍塌

示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>
</body>
</html>

效果:

如上图所示,浮动元素脱离了文档流,并不占据文档流的位置,自然父元素也就不能被撑开,所以没了高度,导致父元素高度坍塌。

浮动元素对父元素的影响

对父容器 若子元素都是浮动元素,则无法撑开父元素高度,父元素失去高度。

浮动元素其他浮动元素的影响

对其他浮动元素,如果包含块太窄,无法完全水平容纳浮动元素,那么其他浮动元素就会向下移动,直到有足够空间。如果浮动元素高度不同,那么向下移动时可能会被卡住。

示例代码1(块太窄,向下移动):

1
2
3
4
5
6
7
8
<div style="border: solid 5px #0e0; width:250px;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>

效果:

示例代码2(卡住):

1
2
3
4
5
6
7
8
<div style="border: solid 5px #0e0; width:250px;">
<div style="height: 120px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>

效果:

浮动元素对普通元素的影响

普通元素会表现得当作浮动元素不存在一样,浮动元素可以覆盖普通元素,如果宽高合适,普通元素可以占据浮动元素原来的位置

对文字的影响

文字(既inline-level)级的元素会环绕浮动元素,表现的像是察觉到浮动元素一样。

-------------本文结束感谢您的阅读-------------

本文标题:浮动

文章作者:shenzekun

发布时间:2017年07月01日 - 16:07

最后更新:2018年05月10日 - 15:05

原始链接:http://www.shenzekun.cn/浮动.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

您的支持将鼓励我继续创作!