3.1 浮动

如果设置的是float：left；向左浮动，则元素从右边向上浮动起来到水面，然后向左浮动到水槽的左边。如果设置的是float：right；向右浮动，则元素从左边向上浮动起来到水面，然后向右浮动到水槽的右边。

3.2 浮动元素对父级元素高度的影响

在默认情况下，一个元素的内容大小决定这一元素的高度，当为一个元素设定了高度，那么在主流浏览器中，这个元素的高度不再由内容大小而设置的这个高度来决定。浏览器默认内容超过平父级的时候依旧显示，因此当我们为父元素设置高度后，父元素按照设置的值进行渲染，内容超出父元素的部分在默认情况下并不会隐藏。

子级浮动后，就会脱离父级的文档流，父级元素就相当于“少”了内容，或者说是浮动的这个元素不再对父级的高度产生任何作用或影响。

3.3 浮动----clear属性

属性功能：用于清除浮动，规定元素的哪一侧不允许存在其他浮动元素。

基本语法：clear：both;

代码解析：设置元素左右两侧均不允许存在浮动元素。

当即希望实现字元素的浮动布局又希望父级元素由内容撑开高度时；或即希望实现元素的浮动布局，又不希望浮动元素对其他兄弟及元素产生影响时，就需要对浮动元素或相关元素进行一些操作，这些操作的主要目的是“清除浮动元素对其他元素的影响。”

注意：

1）并非浮动元素的所有兄弟级元素都需要清除浮动，只需要针对浮动元素的下一个兄弟级元素设置清除浮动，后面所有元素的布局都会恢复。

2）如果希望在第二个div（浮动元素）与第三个div（清除浮动的兄弟级元素）之间有一定的间距，为浮动元素后的一个兄弟级元素设置顶部外边距时会失效（与上访空白区叠加），此时，可以为浮动元素设置下边距。

浮动的设置方法：

空标签清除浮动

操作：在浮动元素的后面，添加了一个新标签，这个新标签是浮动元素的兄弟级元素，之后为这个标签设置clear属性。

优点：通俗易懂，操作方便。

缺点：会添加大量无语意空标签，结构与表现未分离，不利于维护。

br标签清除浮动

操作：br标签清除浮动的方法类似标签清除浮动，在浮动元素后面添加一个br标签，标签在br标签中设置属性clear，并复制all，即：<br clear=”all”>

优点：比空标签方式语义稍强，代码量较少。

缺点：结构与表现未分离。

ƒ父元素浮动

操作：为当前浮动元素的父级元素设置浮动

优点：语义化没问题，同时代码量少

缺点：父元素的相邻元素布局受影响——于是继续为其父级的父级设置浮动操作，直到body为止。

④父级元素设置overflow：hidden或auto

操作：为当前浮动元素的父级元素设置overflow：hidden或auto

优点：语义化没问题，同时代码量少

缺点：内容很多的时候，会被隐藏，无法显示需要溢出的元素，也可能会对之后js的一些动态效果操作造成影响。

⑤利用after伪元素清除浮动

操作：为当前浮动元素的父级元素添加after伪元素，为after伪元素设置清除浮动的功能代码。

优点：语义化和结构都没有问题

缺点:如果使用不合理，有可能造成代码量过大，另外IE6/7不支持after伪元素，需要使用zoo：1触发hasLayout来清除浮动。

4 模块布局（上）———选择标签

4.1 开发时可以选用的标签以及功能

1）h1-h6标题类标签

标签含义：h1-h6的标签都属于标题类标签，分别表示不同级别的标题，<h1>定义最大的标题,<h6>定义最小的标题

在浏览器默认状态下，每种标题均为加粗效果，且各自对应不同的文字大小，h1为2em，h2为1.5em，h3为1.17em，h4为1em，h5为0.83em,h6为0.67em.(此处小数点精确到了二位，em表示字符大小，浏览器默认字体大小为16像素，1em=16px；如果字体大小设置为20px，那么1em=20px)

2）Hr分隔线

Hr表示分隔线，会以一条直线的方式进行展示，hr标签是一种单标签。分隔线默认占满父级的整行。

3）P与br段落与换行

P标签表示一个段落。br表示换行，为单标签，通常出现在p标签之中。

每个p标签就是一个段落，而使用br标签换行，通常被称为软换行，段落的文本内容会以新的一行开始显示，但是这些文本依旧是一个段落。

4）无序列表与有序列表

Ul表示无序列表，该种列表中的每个列表项前面，在浏览器中都默认显示一个●。

Ol表示有序列表，该种列表中的每一个列表项前面，在浏览器中默认显示为数字类型的1,2,等。

无论是有序还是无序，列表中每个具体的列表项都使用的是li标签。

可以通过list-style-type，来为列表元素（ul或ol）设置具体的项目符号类型，较为常见的符号类型包括：

Disc(实心圆)，circle（空心圆），decimal（阿拉伯数字），lower-alpha(小写英文字母)，upper-alpha（大写英文字母）、upper-Roman（大写罗马字母）、lower-Roman（小写罗马字母），none（不使用项目符号）。

可以通过list-style-position来设置项目符号的显示位置。该属性包括include和outside两种属性，分别表示在列表项文本行内，行外来显示项目符号。

5）自定义列表

自定义列表包括dl/dt/dd三种标签，其中dl表示自定义列表，dt表示自定义列表的标题，dd表示自定义列表的内容。每个dl当中，原则上只有一个dt，可以出现多个dd

6）行内标签

如下的这些标签均属于行内标签，都可以应用于某一个元素之内，均能够与其他行内元素处于同一行，这些元素的主要目的在于实现行内模块的样式控制。

标签含义：

span:没有具体含义，默认状态下没有特殊形式。

Em:表示强调，默认状态下为倾斜效果。

Strong：表示强调，默认状态下为加粗效果。

Var:表示变量，默认状态下为倾斜状态。

B：表示加粗，默认状态下为加粗效果。

I:表示倾斜，默认状态下倾斜效果。

U：表示下划线，默认状态下文本有下划线效果。

4.2 标签的默认显示样式

1）显示属性display

属性功能：规定元素展示的类型。

基本语法：display block

代码解析：设置元素以块元素的方式的显示，元素会拥有块元素的相应特点。

2）根据标签默认display属性划分类别

块元素：

块元素具有以下特性：

（1）默认独占父级的一行，不能够与其他元素处于同一行。

（2）能够设置宽高

（3）外边距设置生效

常见的块元素包括：

（1）网页、框架等基本机构快：html、body、iframe.

（2）网页标题块：title.

（3）表单结构块：form、fieldset、legend。

（4）布局结构块：div

（5）标题段落结构块：h1-h6、p

（6）列表结构块：dl、dt、dd、ul、ol

（7）结构装饰块: hr

‚行元素

行元素具有以下特性：

（1）默认由内容撑开宽高，与其他行元素能够处于同一行；

（2）不能够设置宽高；

（3）纵向外边距失效，横向外边距生效；

常见行元素包括：

（1）行内包含框：span；

（2）超链接：a

（3）图像：img

（4）各类文本修饰类标签：abbr、acronym、b、bdo、big、cite、code、del、dfn、em、i、ins、kbd、s、samp、small、strike、strong、sub、sup、tt、u、var。

（5）表单对象包含框：select。Button、label、texture、

（6）可执行对象包含框：object。

ƒ第三类元素

其实，除了快元素与行元素之外，还存在很多种类的元素，但由于这些元素本身都不多，因此将这些元素归为第三类元素。可以具体换分为以下几种：

（1）display：none ——头部隐藏元素：head、link、meta、style、script

（2）Display：list-item ——列表项元素：li元素

（3）Display：table ——表格元素：table元素

（4）Display：table-row ——表格行元素：tr元素

（5）Display：table-head-group ——表格头部分组显示:thead 元素

（6）Display：table-row-group ——表格行分组显示：tbody元素

（7）Display：table-footer-group ——表格底部分组显示：tfoot元素

（8）Display：table-column ——表格列显示：col元素

（9）display：table-column-group ——表格列分组显示：colgroup元素

（10）Display：table-cell ——单元格显示：td、th

（11）Display:table-caption ——表格标题显示：caption

（12）Display：inline-block ——行内快元素显示：input、option、optgroup

4.3 标签的合理嵌套

1）标签嵌套基本规则

（1）快元素可以包含块元素和行元素

（2）标题、段落类的块元素（h1-h6、dt、p）不能够包含块元素。

（3）行元素可以包含行元素，但不能包含块元素

（4）Ins和del这两种行元素可以包含块元素

（5）Dl下只能直接包含dt和dd元素

（6）Ul、ol下只能直接包含li元素

（7）Table下只能直接包含caption、thead、tbody、tfoot、col、colgroup元素。

（8）Thead、tbody、tfoot下直接包含tr、tr下可以是th或td.通常th出现在thead的tr标签中。

4.4 SEO搜索引擎优化——标签语义性

如何使一个网站在搜索引擎中排名“靠前”，主要有两种方法：

1）在用户使用搜索引擎进行某些关键字搜索时，能够直接在搜索引擎中显示出这个网站，用户通过单击这个链接进行跳转；

2）通过向搜索引擎付费，使用户网站排名在前面。

需要注意的是，搜索引擎会先将推广链接（付费）放在前面，而自然链接放在推广链接的后面。

4.4.1 SEO是什么

SEO是search engine optimization的缩写，是指为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，是网站更适合搜索引擎的检索原则的行为。

SEO和PPC（按点击量付费），共同组成SEM（search engine marketing，搜索引擎营销）

4.4.2 搜索爬虫工作原理

搜索引擎构建一个调度程序，来调度“蜘蛛”的工作，让蜘蛛去和服务器建立链接下载网页，计算的过程都是通过调度来计算的，“蜘蛛”只负责下载网页。

4.4.3 爬虫爬的是什么

爬虫抓取的内容就是文字和图片

2005年以前，前端开发需要负责“设计和制作”两种工作，因此也可以被称为“网页设计与制作”，开发的工具被称为“网页三剑客”，分别是“Photoshop、flash和dreamever”、

查阅很多网页设计与制作的书籍时，常常会附录中找到相应的链接地址，都是非常炫酷的效果。但是，却不能通过搜索引擎进行查询得到，因为搜索引擎的爬虫只会抓取图片和文字，而flash进行网页制作是，所有的文本和图片都是封装在flash中，在<object>中，所以在HTML中并不会将图片和文字以任何形式呈现出来。

4.4.4 SEO中表示强调的标签

Strong、b、em、i都比较相似，其中，strong、em行内标签表示强调语气。彼此之间的区别：

1）b、i属于修饰类标签，也叫作物理标签；strong、em属于内容标签，也叫作逻辑标签；物理标签通常是告诉你浏览器在哪里加粗了，没有别的作用。而逻辑标签是强调语气，它强调语气是通过文本加粗来实现的，也可以通过别的样式来强调语气。

2）B、strong标签表示为加粗样式；em、i表现为倾斜样式。

3）Em、strong表示强调；strong比em语气还要重一点。

4）在搜索引擎优化中strong和em比b和i重要得多。

4.4.5 SEO常常出现的问题

1、是不是所有的媒体的外部链接都是有效？

2、通常从网站开发完成到被搜索引擎收录，再到排行第一，需要多久？

3、博客类网站的搜索机制有何不同？

4、白帽优化和黑帽优化

白帽优化是指符合主流搜索引擎发行方式规定的SEO优化方法。它与黑猫优化相反，白帽优化是最佳的优化手法，他也是SEO从业者的最高职业道德标准。白帽优化在乎长远利益，需要优化的时间比较长久。后续对引擎的依赖度不高。从长远利益发展来看建议使用白帽优化。黑帽优化是一种SEO作弊，当前哥哥浏览器中对其会严重查处，一旦发现，网站就不能翻身，主要包括博客作弊、群发软件作弊，挂黑链、链接养殖场等手法。

5、建议前端了解的几个SEO名词和扩展性词汇

PPC:Pay per click,即“按效果付费”模式，是目前广告市场中最具有竞争力的广告计费模式之一。一个搜索词的价格=起价+点击量*每次点击的价格。

PR值：pagerank即网页的等级，级别从0到10.级别越高说明该网页越受欢迎。一个网站的外部链接数越多其PR值就越高；外部链接站点的级别越高，其PR值也就越高。

PV和UV：PV指的是浏览量；UV指的是用户量。

跳出率：跳出率指的是用户到达网站上并在网站上仅浏览一个页面就离开的访问次数与所有访问次数的百分比。

4.5 嵌套层数与深度

在选用标签时，还需要考虑嵌套的层数，嵌套的层数多了，一方面会让整体代码增多。另一方面SEO并不能够抓取非常深的结构代码。在选择标签时，要尽量减少结构的嵌套。

4.5.1 功能需求

从嵌套合理、层数深度、标签语义性等角度来进行对比如表所示：

具体方案	嵌套情况	标签语义	评价	备注
Ul无序列表	合理嵌套	合理	较好	Ol和ul类似
Dl自定义列表	合理嵌套	合理	较好	使用div标签包含发布时间和文章分类
Dl自定义列表	合理嵌套	在h3部分有误	一般	使用h3标签标签包含发布时间和文章分类
大量应用div	合理嵌套	没有语义性	差
Table表格	层数太多	语义性偏差	差	Table标签的语义性为表格

4.6 样式的可控性

4.6.1 加强版选择器——后代选择器

基本语法：选择器名 1 选择器名 2....选择器名n{

属性名：属性值；

}

后代选择器使用多个选择器的组合来找到要控制的标签，不同的选择器之间使用空格分开，

如：.warp div p{};.wrap .con dl dt a{};

4.6.2 加强版选择器——子代选择器

基本语法：选择器名1>选择器名2>...>选择器名n{

属性名：属性值；

...}

子代选择器也是使用多个选择器的组合来找到要控制的标签，不同的选择器之间使用大于号>分隔。整体的原理与后代选择器类似，所不同的是，子代选择器仅仅选择到的是下一代，并非所有后代。如#wrap >p{border:1px solid red;}

4.6.3 加强版选择器——群组选择器

群组选择器是为了“多个不同的选择器”设置相同的样式，不同的选择器之间使用逗号分隔。

#wrap，.con p {border: 1px solid red; }的意思是为id名为wrap的元素添加1像素的实线红色边框的样式，为类名为con的元素中的所有p元素添加1像素的实线红色边框的样式。

4.6.4 加强版选择器优先级算法

对于后代、子代、群组选择器优先级如下：

1）对于后代、子代选择器，其优先级是进行叠加运算(而不进位)

2）对于群组选择器，每个逗号分隔不同的选择器，不同的选择器各自计算各自的优先级。

4.6.5 其他

1、通配符选择器

使用*表示通配符选择器。使用通配符，能够选择到所有的标签。

2、毗邻选择器

也称为相邻选择器，使用“+”连接两个选择器，例如：.con+p选择器表示选择类名为con的元素后面的p元素，且要求p元素必须是div元素的兄弟级元素。

3、div .wrap和div.wrap是同一种选择器吗

第一种中间有一个空格，因此表示后代选择器，选择的是div元素下的wrap的元素。

第二种选择器，之间连在一起的并非后代选择器，而是表示符合某种条件的某种选择器，此处选择器选中的是类名为wrap的div。

HTML5的重点知识小结——整体布局（浮动布局、选择标签）