《HTML+CSS+JavaScript》之第22章浮动布局

22.1 文档流简介

元素在页面中出现的先后顺序。

22.1.1 正常文档流

普通文档流或普通流或normal flow（默认页面元素布局）：将页面从上到下分为一行一行，块元素独占一行，相邻行内元素每一行从左到右排列直到排满该行。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div></div>
    <span></span><span></span>
    <p></p>
    <span></span><i></i>
    <img />
    <hr />
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

22.1.2 脱离文档流

脱离正常文档流，使用浮动或定位改变默认的文档页面元素布局情况。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
    <style type="text/css">
        /*定义父元素样式*/
        #father
        {
            width:300px;
            background-color:#0C6A9D;
            border:1px solid silver;
        }
        /*定义子元素样式*/
        #father div
        {
            padding:10px;
            margin:15px;
            border:2px dashed red;
            background-color:#FCD568;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">box1</div>
        <div id="son2">box2</div>
        <div id="son3">box3</div>
    </div>
</body>
</html>
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
28
29
30
31
32

22.2 浮动

float:left或right;
1

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*定义父元素样式*/
        #father
        {
            width:300px;
            background-color:#0C6A9D;
            border:1px solid silver;
        }
        /*定义子元素样式*/
        #father div
        {
            padding:10px;
            margin:15px;
        }
        #son1
        {
            background-color:hotpink;
            /*这里设置son1的浮动方式*/
        }
        #son2
        {
            background-color:#FCD568;
            /*这里设置son2的浮动方式*/
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">box1</div>
        <div id="son2">box2</div>
    </div>
</body>
</html>
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
28
29
30
31
32
33
34
35
36
37
38

设置第1个div浮动

#son1
{
	background-color:hotpink;
	float:left;
}
1
2
3
4
5

box1变成浮动元素，宽度不再延申，内容决定宽度。相邻的下一个元素box2紧贴box1。

设置第2个div浮动

#son2
{
	background-color:#FCD568;
	float:left;
}
1
2
3
4
5

浮动元素，宽度由内容决定，后面元素会紧贴该浮动元素。
可以利用浮动实现多个块元素并排一行。

22.3 清除浮动

clear:取值;
1

left，清除左浮动
right，清除右浮动
both，同时清除左右浮动

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*定义父元素样式*/
        #father
        {
            width:300px;
            background-color:#0C6A9D;
            border:1px solid silver;
        }
        /*定义子元素样式*/
        #father div
        {
            padding:10px;
            margin:15px;
        }
        #son1
        {
            background-color:hotpink;
            float:left;          /*左浮动*/
        }
        #son2
        {
            background-color:#FCD568;
            float:right;        /*右浮动*/
        }
        .clear{clear:both;}
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">box1</div>
        <div id="son2">box2</div>
        <div class="clear">clear:both</div>
    </div>
</body>
</html>
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
28
29
30
31
32
33
34
35
36
37
38
39
40

通常浮动元素后面增加空元素，定义"clear:both"来清除浮动。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #wrapper
        {
            width:800px;
            //height:600px;
            border:10px solid silver;
        }
        #header,#footer
        {
            height:100px;
            background-color:lightskyblue;
        }
        .main-left,.main-right
        {
            height:380px;
            margin-top:10px;
            margin-bottom:10px;
            background-color:hotpink;
        }
        .main-left
        {
            float:left;
            width:595px;
        }
        .main-right
        {
            float:right;
            width:195px;
        }
        .clear{clear:both;}
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="main">
            <div class="main-left"></div>
            <div class="main-right"></div>
            <div class="clear"></div>
        </div>
        <div id="footer"></div>
    </div>
</body>
</html>
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

相关阅读:
JS-数据类型-和转换
栈在求值表达式中的应用
【LeetCode-简单题】202. 快乐数
DolphinDB 基于 Glibc 升级的性能优化实战案例
物理学专业英语（写作整理）04 物理中常用的空间表示
react笔记-03react-router篇
R语言绘制分组方框图三
linux文件输入输出的重定向
我，5年Java开发，99.9%技术都会……开始靠八股文面试
什么性格的人适合生物类专业？高考志愿填报选专业

原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125631635

《HTML+CSS+JavaScript》之第22章 浮动布局

《HTML+CSS+JavaScript》之第22章 浮动布局

22.1 文档流简介

22.1.1 正常文档流

22.1.2 脱离文档流

22.2 浮动

22.3 清除浮动

《HTML+CSS+JavaScript》之第22章浮动布局

《HTML+CSS+JavaScript》之第22章浮动布局