CSS的块级元素和内联元素，以及float
2017-04-11 11:26
405 查看
说明：之前有一点搞错了，就是float其实是浮动起来，其它元素会位于它的底层。
最近在系统地学习HTML5，感觉补上了好多缺失的知识。
例如：
锚点定位其实可以通过
CSS使用
子元素只能继承父元素的字体、颜色等外观，但默认不能继承布局样式。如果必须要继承，需要让具体的属性设为
最近在系统地学习HTML5，感觉补上了好多缺失的知识。
例如：
锚点定位其实可以通过
id来实现；
CSS使用
!important来设置强优先级；
子元素只能继承父元素的字体、颜色等外观，但默认不能继承布局样式。如果必须要继承，需要让具体的属性设为
inherit，如：
border:inherit;
text-transform有
uppercase、
lowercase、
capitalize等选项。
font-variant有
small-caps这个选项，还可以
normal来复原。
display、
float！！！--这是本文的主题。
首先，HTML中有两类特别的元素：块级元素(block)、内联元素(inline)。其实还有一种内联-块级元素(inline-block)。
区别在于：
块级元素(block)可以有效地设置width和height，且自带换行。如<div>。
内联元素(inline)不能有效地设置width和height，且没有换行。如<span>。
而内联-块级元素(inline-block)。则可以有效地设置width和height，但没有换行。如<img>。
举个例子：
1<html>
2
3<head>
4<metacharset="utf-8">
5<title>Demofor"block"/"inline"/"inline-block"</title>
6
7<style>
8/*为div设置尺寸*/
9div,span{
10width:200px;
11height:200px;
12}
13/*为div设置颜色：红黄绿*/
14div#a{
15background:red;
16}
17div#b{
18background:orange;
19}
20div#c{
21background:green;
22}
23/*为span设置颜色：灰*/
24span{
25background:grey;
26}
27</style>
28</head>
29
30<body>
31<divid="a">
32我是div#a
33</div>
34<divid="b">
35我是div#b
36</div>
37<divid="c">
38我是div#c
39</div>
40
41<span>我是SPAN1，按说我的尺寸就是内容的尺寸</span>
42<span>我是SPAN2，按说我的尺寸就是内容的尺寸</span>
43
44</body>
45
46</html>ViewCode
显示如下：
我是div#a
我是div#b
我是div#c
我是SPAN1，按说我的尺寸就是内容的尺寸我是SPAN2，按说我的尺寸就是内容的尺寸
能够明显看到：
块级元素的
div是有宽度和高度，且自带换行；而
内联元素的
span的宽度和高度取决于其内容的宽度和高度，且没有换行。
至于
内联-块级元素的
img就不示意了。
CSS可以将块级元素和内联元素互换！！！--具体是通过
display属性来实现的。
先看看如何将
块级元素变为
内联元素：
div#a{
/*其它设置省略*/
display:inline;
}结果如下：
我是div#a
我是div#b
我是div#c
我是SPAN1，按说我的尺寸就是内容的尺寸我是SPAN2，按说我的尺寸就是内容的尺寸
可以看到
div#a的宽度和高度已经不是200px啦，但是仍然具备换行--这个稍后说。
再来看看
span如何变成
块级元素：
span{
display:block;
width:200px;
height:200px;
}结果如下：
我是div#a
我是div#b
我是div#c
我是SPAN1，按说我的尺寸就是内容的尺寸我是SPAN2，按说我的尺寸就是内容的尺寸
可以看到
span已经变成了块级元素，能够设置宽度和高度，还自带换行了。
现在，再来说说
div变成内联元素仍然换行的问题--只说解决方案，因为我也不知道内部原理是怎么回事。
解决方案就是：
float。
我的理解，这货的作用就是：
如果设置了
float:left，就是跑到下一个元素的左边，或者说把下一个元素拽到自己的右边；【错误的】
如果是
float:right，就是跑到下一个元素的右边，而且贴近父元素的边界。【错误的】
就是漂浮起来，位居其它元素之上，不与它们争夺地盘！！！但是，因为我们是俯视它们，所以漂浮起来的元素会遮挡住它下面的元素！！！
--变成浮动的，飘来飘去，虽然不再霸道的占据整行，但仍然有自己的尺寸。【错误的】
这里只示意一下（div恢复block，span恢复inline）：
div#b{
background:green;
float:left;/*我的右边没有换行*/
}结果如下（div#b浮空了，div#c就跑它下面去了，所以看不见啦--但文字跑不过去，就与SPAN-1的重合了）：
我是div#a
我是div#b
我是div#c
我是SPAN1，按说我的尺寸就是内容的尺寸我是SPAN2，按说我的尺寸就是内容的尺寸
我们可以改变一下div#b的宽度和高度，将其设为100px，然后就能看到没有被遮住的div#c啦：
我是div#a
我是div#b
我是div#c
我是SPAN1，按说我的尺寸就是内容的尺寸我是SPAN2，按说我的尺寸就是内容的尺寸
其实float有个特性：如果前一个元素也是float的，那二者会水平并列（除非一行装不下，那会换行）；如果前一个元素不是float的，那float的会位于前一个元素的下面。
那么，当多个div都浮动的时候，会发生什么？--彼此连接的同时覆盖后面的非float元素！！！
但这未必是我们想要的。
拿上一个例子来说，如果我不想让div#b覆盖div#c，应该怎么做？
很简单，div#c的clear设为right即可（只是用来演示，如果真要设置的话，b和c都设为float即可并列），效果如下：
我是div#a
我是div#b
我是div#c
我是SPAN1，按说我的尺寸就是内容的尺寸我是SPAN2，按说我的尺寸就是内容的尺寸
这里有个关键：clear是作用于自身，就是说是决定自己某侧浮动与否。
这有点像一些人的性格：不管外界如何，我坚持我的原则；如果我不认同你，我就离开，哪怕你很牛逼（float）。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 