五、CSS常用属性之浮动

HTML、CSS基础课程系列 CSS

CSS常用属性之浮动

前面我们了解了CSS的一些基础性的东西,那么CSS和HTML如何紧密相连的呢,今天我们就来介绍一下关于HTML文档如果通过CSS实现布局的。

display属性

在了解布局之前,我们先来了解下元素框类型,在html元素里面有两个元素:<div><span>标签,前者是自定义块级元素,后者是自定义内联元素,那么到底什么是块级元素,什么是内联元素呢,就是通过css的display属性判断的,display常用的值有以下这些:

描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)

那么,块级元素和内联元素(又叫行内元素)有什么区别呢:

  1. 是否独占整行。
  2. 是否能单独设置高宽。(css的width和height属性)

当然,inline-block不是独占整行的,但是能设置高宽。

注意:display:none和另外一个visibility:hidden是不一样的,同样是隐藏元素,前者不占位置,后者要占位置。

浮动

浮动的由来

最初,浮动(float属性)被引入是由于WEB开发人员实现简单的布局,涉及文本以及一些图像,让文本围绕其周围,报纸上通常会看到这种布局。但是很快WEB开发人员意识到,不仅仅是图像,可以让很多的元素特别是块级元素都浮动起来,给他们配置其高宽,达到布局效果。

简单例子

举个例子,先让一张图片浮动起来,文字在周围环绕。HTML代码:

1
2
3
<h1>浮动的简单例子</h1>
<img src="../images/float.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

CSS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
p {
line-height: 2;
word-spacing: 0.1rem;
}
img {
float: left;
margin-right: 30px;
}

保存并刷新您的浏览器,你会看到如下页面:

多列浮动布局

浮动布局通常用作多个块级元素之间,我们成为多列浮动,尽管它非常好用,但是有一些奇怪的副作用要处理。如果让两个块级元素排列在同一行,就会使用浮动:

1
2
<div class="box1">我是盒子1</div>
<div class="box2">我是盒子2</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div{
text-align: center;
font-size:24px;
font-weight: bold;
line-height: 100px;
}
.box1{
width:300px;
height:100px;
background-color: blue;
float:left;
}
.box2{
width:400px;
height:100px;
background-color: red;
float:right;
}

可以很明显看出,现在两个盒子处于同一行,蓝色盒子在左边,红色盒子在右边。如果他们的宽度等于这一行的宽度,是不是就达到分割布局的目的了呢。但是副作用来了,如果在下面再添加一个不浮动的盒子3:

1
<div class="box3">我是盒子3</div>
1
2
3
4
5
.box3{
width:500px;
height:120px;
background-color: green;
}

那么就是现在这个样子:

这就涉及到html元素文档流的概念,元素按照其在HTML中的位置决定排布的过程,叫做文档流(普通流normal-flow),通俗来讲,就是文本或图片排版是从上至下,从左往右的方式,这种方式就叫正常文档流。
浮动(float),首先要做的事情就是脱离文档流,相当于脱离水平面,浮起来了。也就是说,上面的盒子1和盒子2都浮动起来了,而盒子3是看不到盒子1和盒子2的,所以它遵从文档流的安排,就从顶端开始排下来,所以盒子3占到了盒子1所在的位置。

清除浮动

很明显了,使用浮动有这样的副作用,那么我们就需要清除它,清除浮动的属性叫clear,它的值有left、right和both三种。试试给上面的盒子3添加clear:both

设置class值为.clear的div

上面我们已经给盒子3添加了清除浮动,排版正常了,这时候如果给盒子3添加margin-top外边距你就会发现,它不会生效,要解决这个问题的话,我们通常的做法是给浮动元素下方添加一个class值为clear的空的div,如下:

1
2
3
4
<div class="box1">我是盒子1</div>
<div class="box2">我是盒子2</div>
<div class="clear"></div>
<div class="box3">我是盒子3</div>

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
div{
text-align: center;
font-size:24px;
font-weight: bold;
line-height: 100px;
}
.box1{
width:300px;
height:100px;
background-color: blue;
float:left;
}
.box2{
width:400px;
height:100px;
background-color: red;
float:right;
}
.clear{
clear:both;
}
.box3{
width:500px;
height:120px;
background-color: green;
margin-top:20px;
}

现在就正常了:

小结

这节课我们学习了布局中的浮动布局,以及浮动布局中常见的一些问题。下节课我们会详细讲解html元素框,也就是盒模型一系列知识,包括外边距、内边距以及边框等。

作业

①. 测试前面学习的所有html元素是什么类型,块级元素还是内联元素?

②. 测试上面找到的一些内联元素,是否能设置高宽?

③. 使用浮动布局完成占座作业。

教材编写 myxxqy@gmail.com 张超
2017.07.06