【融职培训】Web前端学习第2章网页重构7 浮动布局

一、元素分类

特性展示

在此前的课程中，我们还有一些遗留问题没有解决，例如：

有些元素不管宽度多少，都是独立占一行显示，有些元素则可以共同占用一行显示;
有些元素可以设置宽度和高度，有些元素不能设置宽度和高度;
有限元素可以设置上下的外边距，有些元素则不能设置;

通过上述问题，我们可以推断出，html元素是有不同类别的。

我们来写一个实例，代码如下所示:

 1 <div>2     <h1>我是一个标题</h1>3     <h1>我是一个标题</h1>4 </div>5 <div>6     <img src="data:images/logo.png" alt="">7     <img src="data:images/logo.png" alt="">8 </div>9 <div>
10     <a href="#">链接</a>
11     <a href="#">链接</a>
12 </div>

再通过css，分别对h1，img，a 三个标签设置如下属性：

边框
外边距
宽高

可以得出以下结论：

h1标签可以设置宽高，可以设置所有外边距，独立成行;
img标签可以设置宽高，可以设置外边距，不独立成行;
a标签不可以设置宽高，不可以设置上下外边距，不独立成行;

从这个示例中，可以推断出，h1，img，a标签属于三中类型。

分类总结

html元素可以分为三大类：块元素、行内元素、行内块元素，特性如下所述：

块元素：可以设置宽高，可以设置所有外边距，独立成行。
行内块元素（内联块元素）：可以设置宽高，可以设置外边距，不独立成行。
行内元素（内联元素）：不可以设置宽高，不可以设置上下外边距，不独立成行。

元素归类

在我们常用的标签中，按元素的分类，如下所示。

块元素：h、div、ul、li、p、form;
行内块元素（内联块元素）：img、input;
行内元素（内联元素）：a、span;

元素类型转换

通过display属性，可以将元素的类型转换成其他类型，例如如下的css样式；

1 a{
2     display:block;
3     /* display:none;隐藏元素 */
4 }

就可以将a标签转换成块元素，然后就可以对其指定宽度和高度了，这样我们就可以实现一个有宽度和高度的链接元素了。

chrome调试工具

在chrome浏览器中按f12键可以查看网页详情，包括html、css相关的信息，可以用来配合网页代码的调试和查看。

二、浮动布局

了解了元素的分类之后，我们再来看下一个问题，我们之前讲解的盒子模型，都是用div作为容器来存放网页的内容，而div是块元素，那么如何让两个div在同一行显示呢，可以使用float属性来实现。示例代码如下所示：

float属性

 1 <!DOCTYPE html>2 <html lang="en">3 <head>4     <meta charset="UTF-8">5     <title>Document</title>6     <style>7         .box1{8             width:200px;9             height:200px;
10             background-color: #f00;
11             float:left;
12         }
13         .box2{
14             width:200px;
15             height:200px;
16             background-color: #0f0;
17             float:left;
18         }
19     </style>
20 </head>
21 <body>
22     <div class="box1"></div>
23     <div class="box2"></div>
24 </body>
25 </html>

float属性可以让块元素与其他元素在同一行显示，我们将两个div元素都设置float:left属性，这样两个div就可以在同一行显示了。

通过float属性也可以将一个行内元素或者款元素设置为右对齐，例如融职教育首页的查看更多按钮，示例代码如下所示：

1 <h2>教学文档 <a class="more" href="">查看更多</a></h2>

 1 h2{2     border:1px solid #00f;3     width:500px;4     height:36px;5 }6 .more{7     color:#aaaaaa;8     font-size: 12px;9     float: right;
10     /* 设置浮动的a标签可以设置上边距 */
11     margin-top:10px;
12 }

浮动元素的特性

浮动元素有一个特性，这也是困扰很多初学者的特性，那就是浮动元素会脱离文档流，我们来看下面这个例子：

 1 <!DOCTYPE html>2 <html lang="en">3 <head>4     <meta charset="UTF-8">5     <title>Document</title>6     <style>7         .box1{8             width:200px;9             height:200px;
10             background-color: #f00;
11             float:left;
12         }
13         .box2{
14             width:200px;
15             height:200px;
16             background-color: #0f0;
17             float:left;
18         }
19     </style>
20 </head>
21 <body>
22     <div>
23         <div class="box"></div>
24         <div class="box"></div>
25     </div>
26     <h3>浮动元素下面的元素</h3>
27 </body>
28 </html>

可以看到h2元素的边框与菜单重叠，并且h2的文本内容并没有在菜单下方显示，而是在菜单的右侧显示。这是因为浮动元素会脱离整个html文档流，导致其自身不占位，所有h2标签会与整个菜单重叠显示，为了解决这个问题，我们需要掌握清除浮动的方法，本章我们讲解两种方法：空div清除浮动和伪元素清除浮动。

空div清除浮动

我们在菜单和h2之间添加一个空的div标签，并且为其制定样式。

 1 <!DOCTYPE html>2 <html lang="en">3 <head>4     <meta charset="UTF-8">5     <title>Document</title>6     <style>7         .clear{8             clear:both;9         }
10         .box1{
11             width:200px;
12             height:200px;
13             background-color: #f00;
14             float:left;
15         }
16         .box2{
17             width:200px;
18             height:200px;
19             background-color: #0f0;
20             float:left;
21         }
22     </style>
23 </head>
24 <body>
25     <div>
26         <div class="box"></div>
27         <div class="box"></div>
28         <div class="clear"></div>
29     </div>
30     <h3>浮动元素下面的元素</h3>
31 </body>
32 </html>

通过为空div指定clear:both属性，可以清除其上方菜单浮动导致的页面不良营销，使浮动元素后面的内容可以按正常的文档流布局，这样我们就可以看到h2标签成功第在菜单的下方显示了。

伪元素清除浮动

在上面的案例中，我们使用了一个空的div来清除浮动，很方便地解决了清除浮动的问题，但是html标签毕竟是为了布局而存在的，我们随意添加一个标签来处理样式，从html存在的意义来考虑，这个解决方案并不是特别理想，所以我们接下来的这个方案可以完全在css的层面解决清除浮动的问题，代码如下所示。

1 <div class="nav clear">
2     <div class="box1"></div>
3     <div class="box2"></div>
4 </div>
5 <h2>浮动元素之下的元素</h2>

1 .clear::before,.clear::after{
2     content:"";
3     display: block;  /*将伪元素增加的内容设置成块元素*/
4     clear:both;
5 }

通过伪元素清除浮动的方式，我们不需要增加任何新的标签，只需要在浮动元素父级容器设置上述属性即可，这样网页的任何位置需要清除浮动，只需要给元素添加一个class名，既方便有实用。不管是日后的练习还是工作，都建议大家用伪元素来清除浮动。

四、课后练习

用列表元素实现一个横向的导航栏。
实现一个圣杯布局效果。
实现融职教育首页文档列表效果，列表包括图片，标题，还有按钮。

【融职教育】在工作中学习，在学习中工作