Web前端从入门到精通-7 css简介——浮动
欢迎回来，上节课没有给大家留什么问题，但是介绍了一个很重要的问题，那就是css的层叠优先级顺序：
行间样式>id选择器>类选择器>元素选择器
好的，复习到此结束，接下来我们继续学我们的css
这节课要讲一个很重要也是理解起来略有困难的东西——浮动
之前的课程中我们举了好几个列表的例子，但无一例外的是所有的列表都是竖着成一排的
那么怎么让它们横起来呢？——就是用我们的浮动(float)
在正式介绍浮动这个东西之前，我们先来说个知识点——块元素和内嵌元素
什么意思呢？不知道大家是否发现了一个规律或者是否自己曾经尝试过
在之前的例子中，我们给div、li设置过width、height这些样式
但是却没有给a、span设置过，那么我们不妨给这些标签试着加上width和height试试
代码和预览我就不在这里写了，大家最好自己亲自尝试一下
最终width和height是没有效果的
好的，大概我们知道是什么情况了：标签好像是分那么两种
一种是设置width和height起作用的
还有一种是设置width和height不起作用的
于是搞计算机的这伙儿人就给前者起了一个名字叫块元素，还有人叫它块级元素
后者就叫行内元素，或叫做内联元素、内嵌元素
由于前端的各路神仙百花齐放、百家争鸣，所以衍生出这么多叫法
名字是什么不重要，还有一点需要说明就是块元素除了设置宽高起作用之外还有一个特性
那就是如果不做任何特殊处理，块元素就会独占一行，不论它的前面、后面、父级、子级是块还是内嵌
而内嵌元素，则会按照我们写的顺序来显示
好的，扯了这么多，不如来个例子看着明白
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联和块</title> <style type="text/css"> .ul1{ width:500px; height:200px; border:1px solid black;} .ul1 li{ width:200px; height:50px; border:1px solid black;} .a1{ width:100px; height:50px; border:1px solid black;} .div1{ width:100px; height:100px; border:1px solid black;} </style> </head> <body> <ul class="ul1"> <li>li1</li> <li>li2</li> <li>li3</li> </ul> <a class="a1" href="javascript:;">a链接1</a> <a class="a1" href="javascript:;">a链接2</a> <a class="a1" href="javascript:;">a链接3</a> <a class="a1" href="javascript:;">a链接4</a> <div class="div1">div1</div> </body> </html>
结构和样式都非常简单，所以我们并不再多说什么，直接看运行结果
好的，看着这个例子，我们可以清楚的看到，li是块元素、a链接是内嵌元素
div的话之前已经说了是块元素，因此也没什么好怀疑的
那么ul是什么元素呢？
好的，判断一个元素是块还是内嵌其实最简单的办法就是看宽高对它是否有效
从上面预览的效果我们也可以看到，宽、高对它是有效果的
好的，接下来我们分析一个有意思的问题，a链接是内联元素
那为什么不会排在上面的ul的后面呢？
如果你有这样的疑问，不妨再返回去认真看看，分析下
即使a想和ul挤在一排，ul允许吗？
块元素是很霸道的，它才不管你是什么东西，统统都会给你挤到下一行
所以a链接被挤了下来
同理，为什么div也没有跟在第四个a链接的后面呢？
不是a链接不想，而是div不愿意和这些连宽高都没法设置的小角色在一起啊
自然也就到了下一排
好的，虽然一个元素是块儿还是内嵌科学家已经帮我们定好了
但政治老师告诉过我们：一切事物都是发展变化的
所以块儿可以变成内联，而内联也可以变为块儿
这是通过一个叫display的样式属性来控制的
例如我们在上面的例子中给.a1这个类加上display:block;这条样式属性
那我们页面上所有带有a1这个类名的a元素也就开始称霸了:
如果你预览之后是这样，那么恭喜你加对地方了
好的，说了这么半天好像和我们这节课的主题——浮动还没扯上什么关系，别急
接下来再做些准备工作
我们给上面的代码稍微加点东西，先给所有的li加个背景background:red，再给第一个li加一个类.li1
在.li1里面再加一条样式background:blue;
经过这么一番折腾，让大家加深了一下对上节课讲的层级这一概念的印象，接下来大家可以对比下效果是否和我的一样
如果一样的话，那么恭喜你，又加对地方了
最后，再给.li1加上我们的浮动:float:left;
这时，见证奇迹的时刻即将到来：
大家会发现一个很神奇的现象，li1好像位置没有变，而li2和li3出现了意外，不仅位置变了，而且它俩好像还重叠了起来
好的，事实上是这样的，如果我们给一个元素加了float浮动，那么这个元素好像就跟飘起来了
float:left就是向左飘，float:right就是向右飘
当然即使它再怎么奔放再怎么飘总得有个尽头，总得有一面墙把它挡住
这面墙就是距离它最近的块级父元素
不过这句话说的有些啰嗦，因为W3C规定内联里面不可以有块元素
所以只要你的css还是符合法律规定的，块元素的父级一定是块元素
如果你违反法律做事，非得在内联里面套一个块元素，出了什么事情概不负责
好了，又扯多了一些，回到我们的话题中
在这里的话距离li最近的块级父元素那就是ul了
所以加了float:left的li们都一边倒向ul的左边
当然视力稍微正常点的朋友都会说你这li明显还是和ul有那么一些间距嘛
其实这个间距是和我们之后要说的盒模型有关系
这个间距其实就是ul的padding
总之先不用管这个问题
可能由于li1本身就在ul里面的左侧，所以大家对飘到左侧的体会可能并不是那么深
大家不妨把.li1的float改为right试试
如果你的运行结果和上面一样，那么恭喜你又前进了一步
好的，看着这个界面，我想问大家一个问题li1和li2，谁的位置更高一些呢？
我们在之前说过了，加了浮动的元素会飘起来，所以必然li2的位置更高一些
因此我们基本上可以猜测出来
当li1加了左浮动的时候，一定是因为蓝色li1飘起来了，然后因为li1在上空将li2挡住了
所以我们只看到了一个红色的li，我们看到的这个红色的li就是li3
那一定有人会有疑问，如果要是这样的话为什么li2和li3文字重叠在了一起呢？
实际上块元素在加了浮动飘起来之后会有这么一个特点：它会把它下方挡住的元素的文字挤下去
所以我们看到这样的效果也就不奇怪了
好的，其实我们可以进一步验证我们的猜测
如何验证呢？
我们给.li1这个类加上一条样式height:25px;
如果我们的猜测正确的话，li1的高度变成25px之后
我们可以看到li2的下半部分和整个li3
而且这次li2里面的文字虽然也被挤了下来，但是就不会盖住li里面的文字了
分析了这么多，还是直接预览最明显
和我们所设想的一模一样，这正所谓英雄所见略同，呵呵
这节课到此为止，下节课我们继续说我们的浮动
