HTML笔记之定位与浮动
HTML元素坐标定位
HTML元素坐标定位，这些知识点得掌握
文档坐标和视口坐标
视口坐标是相对于窗口的坐标，而文档坐标是相对于整个文档而言。例如，在文档坐标中如果一个元素的相对于文档的Y坐标是200px，并且用户已经把浏览器向下滚动了75px，那么视口坐标中元素的Y坐标为200px –75px = 125px。
如何获取浏览器滚动条的位置?Window对象的pageXOffset和pageYOffset属性在所有浏览器中提供这些值，除IE8以及更早的版本。IE和所有现代浏览器也可以通过scrollLeft和scrollTop属性获取滚动条位置。
下面代码的getScrollOffsets方法获取滚动条位置：
01 //以一个对象的x和y属性放回滚动条的位置
02 function getScrollOffsets(w){
03 w = w || window;
04 //除了IE 8以及更早的版本以外，其他浏览器都支持
05 if(w.pageXOffset != null) return {x: w.pageXOffset, y:
w.pageYOffset};
06 //对标准模式下的IE
07 var d = w.document;
08 if(patMode == "CSS1Compat")
09 return {x: d.documentElement.scrollLeft, y:
d.documentElement.scrollTop};
10 //对怪异模式下的浏览器
11 return { x: d.body.scrollLeft, y: d.body.scrollTop};
HTML基础总结
注意要点：<title></title>和<meta>标签对
只能放在<head></head>标签对之间。
标签
块级标签 块级标签显示的外观按块显示，具有一定的高 度和宽度。 常用的标签
标题标签 <h1> ~ <h6> 2. 段落标签 <p> 注意:段落标签内的内和其他标签内的元素之间有明 显的间隔 3. 水平线标签 <hr>
表格
<th>表示表格标题其效果是字体居中加粗 表格的逻辑分区 页眉 <thead></thead> 主体 <tbody></tbody> 页脚 <tfoot></tfoot>
表格
表格的跨行跨列 例:<table border="2px"> <tr> <td colspan="2">1</td> <td>1</td> </tr> <tr > <td rowspan="2">1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> </tr> </table>
Web前端开发案例教程6制作学院新闻块
其实，想要解决这个问 题也很简单，只需要对 后面的元素设置清除浮 动即可!
6.2.1 元素的浮动
清除浮动
在 CSS 中，使用 clear 属性清除浮动，格式如下。
选择器{clear:left|right|both;}
添加如下样式代码。
p{clear:both;} /*清除浮动的影响*/
浏览网页，效果如图所示。
6.2.2 元素的定位
元素的定位属性
position 属性仅用于定义元素以哪种方式定位，并不能确定元素的具体位置。 在 CSS 中，通过left、right、top、bottom 这 4 个坐标属性来精确定位元素的位 置。
① left：定义元素相对于其父元素左边缘的距离。 ② right：定义元素相对于其父元素右边缘的距离。 ③ top：定义元素相对于其父元素上边缘的距离。 ④ bottom：定义元素相对于其父元素下边缘的距离。
任务6 制作学院新闻块
Web前端开发案例教程
HTML5+CSS3 微课版
任务导学
网页是由若干版块构成的，新闻块是网页中大量出现的版块。本任务制作学院网 站中的学院新闻块，使用HTML标题标记、无序列表标记和图像标记等构建新闻块的 内容，使用CSS定义新闻块的样式。通过本任务的实现，掌握新闻块的实现方法，能 轻松制作网页中其他类似的版块。
任任务务63 制作学院新闻块
网页设计作业-浮动和定位
《浮动与定位》试题
一、单选题
1.下列样式代码中，可以将块元素转换为行内元素的是（）。
A、display:none;
B、display:block;
C、display:inline-block;
D、display:inline;
2.下列样式代码中，可实现元素的溢出内容被修剪，且被修剪的内容不可见的是（）。
A、overflow:visible;
B、overflow: hidden;
C、overflow: auto;
D、overflow: scroll;
3.可以将元素的定位模式设置为相对定位方式的是（）。
A、position: static;
B、position: relative;
C、position: absolute;
D、position: fixed;
4.<div>标记是网页布局中最常用的标记，其显示类型为（）。
A、块级类型
B、行内类型
C、行内块类型
D、浮动类型
5.下列样式代码中，可以将<span>标记转换为块元素的是（）。
A、display:none;
B、display:block;
C、display:inline-block;
D、display:inline;
6.下列样式代码中，可以实现绝对定位模式的是（）。
A、position: static;
B、position: fixed;
C、position: absolute;
D、position: relative;
7.<span>标记是网页布局中常见的标记，其显示类型为（）。
A、块级类型
B、行内类型
有几种定位方式？分别是如何实现定位的？参考点是什么？使用场景是什么？
有⼏种定位⽅式？分别是如何实现定位的？参考点是什么？使⽤
场景是什么？
CSS 有三种基本的定位⽅式：⽂档流、浮动和定位。
⽂档流(normal flow)：⽂档流是所有元素布局的基础，作为从左到右、从上到下的布局⽅式，这是最常⽤的⼀种排版布局⽅式。
浮动(float)：float:left/right；浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另⼀个浮动框的边框为⽌。由于浮动框不在⽂档的普通流中，所以⽂档的普通流中的块框表现得就像浮动框不存在⼀样。适⽤于实现⽂字环绕图⽚和多列布局。
定位(position)有以下四种⽅式：
定位⽅
实现⽅式使⽤场景式
static默认布局，按照⽂档流定位；默认布局；
relative相对于元素⾃⾝正常位置进⾏定位，元素在⽂档流中仍占据原来空间，只是表现出来的位置
适⽤于层叠效果；
会相对原来的位置偏移；
absolute绝对定位，相对于有定位属性的第⼀个⽗元素偏移，absolute定位元素会脱离⽂档流；适⽤于⼩区块的布局使⽤频繁
fixed相对浏览器窗⼝定位，设置的偏移属性，是相对于浏览器窗⼝的位置。适⽤于⼴告等意图⼀直出现在⽤户眼
前的信息。
web实验
长春大学
20 15 —2016学年第二学期Web前端开发技术课程
实验报告
学院：计算机科学技术专业：软件工程
班级：软件14401
学号：041440125
姓名：王连发
任课教师：刘艳
实验六浮动与定位
一、实验目的
1.理解元素的浮动，能够使用浮动对网页进行布局。
2.熟悉清除浮动的方法，能够清除浮动的影响。
3.掌握常见的几种定位模式，能够对元素进行精确定位。
二、内容及要求
运用浮动与定位组织页面，通过案例的形式分步骤制作传智播客设计学院首页banner，其效果如图6-1所示，满足以下要求：
1.整个banner分为左右两部分，其中左边为广告图、右边为课程介绍。
2.广告图部分由一张背景图片、广告词、切换图标构成。
3.课程介绍部分由标题、常用软件图标及课程介绍概述构成。
图6-1 传智播客设计学院首页banner效果图
三、实验原理
浮动：所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中相应位置的过程。在CSS中，通过float属性来定义浮动，其基本语法格式：选择器{float:属性值;}，在此的语法中，常用的float属性值有三个：left、right、none。分别用于设置元素向左浮动、元素向右浮动和元素不浮动。
清除浮动：由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。如果要避免这种影响，就需要对元素清除浮动。常用的3种清除浮动的方法：运用clear属性清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动。
clear属性清除浮动：在CSS中，可以给受到浮动的元素分别使用clear:left、clear:right、clear:both;来清除元素左、右及左右两侧浮动的影响。
html和css基础
Selector {Property: value }
参数说明：
Property : value —样式表定义。属性和属性值之间用冒号(:)隔开，定义之间用分号(;)隔开。
常用css选择符
类选择符（.类名，页面中可使用多次）
html+css基础
1、网页HTML代码最前面必须包括W3C声明，以便符合标准：
一般网页：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
不要将样式直接写在页面html代码中，页面中不得使用<font></font>、<style>等标签。
4、CSS文件中需要对一些基本的标签进行定义或重置：
*{
padding:0;
margin:0;
}
body,td,th,div {
font-family:宋体;
font-size: 12px;
color: #000000;
a链接
strong重点内容，加粗，seo中用于标示重点内容
HTML5实训报告-原创实训总结
物理与电子工程学院
专业实训报告
学生姓名: * * * 学号: 20130341100 专业：电子信息科学与技术
班级：13级电科本1班
指导教师：* * *
2017年9月15日
专业实训报告
实训单位：物理与电子工程学院
地点：实验楼信号与系统实验室
实训时间：2017.9.5—2017.9.11
指导教师：* * *
1、实训目的及要求：（根据指导教师在教学过程中给出的具体要求填写）
通过本次实训，旨在以亲身参与各类项目的实际编写工作，来了解新兴的HTML5语言的发展历程，并了解和掌握这一新技术在IT行业中的具体应用范围和使用方法。在进行对H5语言进行初步了解后，通过实训课程的安排，逐步学习基础的H5语言的指令代码，运用所学习的指令代码进行更深入的效果设计，如定位、浮动、3D动画设计、轮播图等初级的H5设计，最后通过运用所有学习的指令操作完成总体的项目设计，从而对H5语言展开比较全面的了解和具备应用能力。要求实训期间认真学习H5的各种指令操作，认真完成作业并书写日报，不得迟到、早退、旷课；若有问题需及时与校负责老师和项目工程师沟通联系。
2、实训的流程及内容（包括前期准备及实训过程）
实训开始前，由承担实训的主要负责人和实训老师，即蓝鸥公司老师杨成龙对这次实训做了总体概述，并说明了本次实训所需要的sublime软件、谷歌浏览器；展示了预期需要完成的设计效果，并说明了实训期间的各项要求。
实训的具体流程为：第一天，总体介绍实训，主要介绍了H5语言的发展历程，说明了本次实训的任务，介绍了所使用的sublime软件的操作方法和相关插件的安装方法。第二天，主要学习了在sublime软件中的固定代码格式，主要有头文件名、网页标题、<style></style>格式，并学习了一些基础的设置，如添加颜色的代码操作。第三天，学习了浮动指令、添加图片的操作。第四天，学习了JC语言，CSS内联样式的代码书写。第五天，学习了CSS外联样式的代码书写，并学习3D动画的代码书写，学习了轮播动画的设计，并对所学的各种代码操作加以总结复习。第六天，学习了当当优品项目的设计和代码书写，并开始
css 总结
css 总结
CSS是网页设计中不可或缺的基础技术之一，它实现了网页的布局、样式和交互效果等方面的功能。对于前端开发人员来说，掌握CSS 的基本知识和技巧非常重要，下面就对CSS进行一些简单的总结。
一、基本语法
CSS代码由选择器和声明块组成，选择器用于确定需要应用样式
的元素，而声明块则包含一个或多个属性和对应的值。例如：```
h1 {
color: red;
font-size: 24px;
}
```
上面的代码使用了h1选择器，表示应用样式到网页中所有的h1
元素。花括号内是声明块，其中color和font-size是两个属性，而
red和24px则是对应属性的值。
二、选择器
CSS中有各种各样的选择器，用于指定需要应用样式的元素。下
面列出一些常见的选择器：
- 标签选择器：根据元素的标签名来选择元素，如div、p、h1等；
- 类选择器：根据元素的class属性来选择元素，用“.”加类名表示，如.class；
- ID选择器：根据元素的id属性来选择元素，用“#”加id名称表示，如#id；
- 伪类选择器：可以根据元素的状态来选择元素，如:hover表示当鼠
标放在元素上方时的状态；
- 后代选择器：可以通过两个或多个选择器的组合来选择元素，如div
p表示选择div元素下的所有p元素。
三、基本样式属性
CSS中有众多的样式属性，下面列出一些常用的基本样式属性：
- color：设置文字的颜色，可以使用颜色名称、16进制RGB值
或RGB值；
- font-size：设置文字大小，可以使用像素、em、rem单位等；
CSS中的三种基本的定位机制
CSS中的三种基本的定位机制
CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
⼀、普通流
除⾮专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin 计算得到。⾏内元素在⼀⾏中⽔平布置。
⼆、定位
１、相对定位
被看作普通流定位模型的⼀部分，定位元素的位置相对于它在普通流中的位置进⾏移动。使⽤相对定位的元素不管它是否进⾏移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。
<html>
<head>
<style type="text/css">
.box1{
background-color: red;
width:100px;
height:100px;
}
.box2{
background-color: yellow;
width:100px;
height:100px;
position: relative;
left: 20px;
}
.box3{
background-color: blue;
width:100px;
height:100px;
position: relative;
right: 20px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
HTML元素坐标定位这些知识点得掌握
HTML元素坐标定位这些知识点得掌握HTML元素坐标定位是网页布局的重要组成部分，通过准确设置元素的位置和尺寸，可以实现各种独特的布局效果。对于前端开发人员来说，掌握HTML元素坐标定位的知识点是非常重要的。本文将详细介绍HTML元素坐标定位相关的知识点，包括绝对定位、相对定位、固定定位和浮动。
1. 绝对定位（absolute）
绝对定位是元素最常用的一种定位方式，通过设置元素的位置属性（left、right、top、bottom）来确定元素相对于其最接近的具有定位属性（relative、absolute、fixed）的父元素的位置。绝对定位的元素不会影响其他元素的布局，并且会脱离文档流。
2. 相对定位（relative）
相对定位是元素相对于其正常位置进行定位，元素仍然在文档流中。通过设置元素的位置属性（left、right、top、bottom）来确定元素在正常文档流中的偏移位置。相对定位对其他元素的布局没有影响。
3. 固定定位（fixed）
固定定位是相对于浏览器窗口来定位元素，无论页面滚动与否，固定定位的元素会始终保持在固定的位置。通过设置元素的位置属性（left、right、top、bottom）来确定元素在浏览器窗口中的位置。固定定位的元素不会影响其他元素的布局。
4. 浮动（float）
浮动是元素相对于其最接近的具有定位属性（relative、absolute、fixed）的父元素进行定位。浮动的元素会脱离文档流，并且会对其他元
素的布局产生影响。通过设置元素的浮动属性（left、right）来确定元
CSS3浮动与定位
✎ 6.2 知识点讲解
✎ 6.3 知识点讲解
元素的类型 <span>标记 元素的转换 元素的显示方式
✎ 6.3 知识点讲解
1、元素的类型
HTML标记语言提供了丰富的标记，用于组织页面结构。为了使页面结构的 组织更加轻松、合理，HTML标记被定义成了不同的类型，一般分为块标记和行 内标记，也称块元素和行内元素。了解它们的特性可以为使用CSS设置样式和布 局打下基础，具体如下：
<span>标记常用于定义网页中某些特殊显示的文本，配合class属性使用。 它本身没有固定的表现格式，只有应用样式时，才会产生视觉上的变化。当其他 行内标记都不合适时，就可以使用<span>标记。
✎ 6.3 知识点讲解
3、元素的转换
如果希望行内元素具有块元素的某些特性，例如可以设置宽高，或者需要块 元素具有行内元素的某些特性，例如不独占一行排列，可以使用display属性对元 素的类型进行转换。
边偏移属性描述top顶端偏移量定义元素相对于其父元素上边线的距离bottom底部偏移量定义元素相对于其父元素下边线的距离left左侧偏移量定义元素相对于其父元素左边线的距离right右侧偏移量定义元素相对于其父元素右边线的距离1元素的定位属性知识点讲解静态定位是元素的默认定位方式当position属性的取值为static时可以将元素定位于静态位置
html定位的三种常用方式
html定位的三种常用方式
html定位是网页开发中非常重要的一部分，它决定了元素在网页中的位置和布局。在本文中，我们将探讨html定位的三种常用方式，并详细介绍它们的特点和用法。
1. 相对定位（Relative Positioning）
相对定位是html中最基本和最简单的定位方式之一。它通过指定元素相对于其正常位置的偏移量来实现定位。通过在元素的CSS样式中设置position属性为relative，我们可以使用top、right、bottom和left属性来调整元素的位置。
相对定位对元素的正常文档流没有影响，即元素仍然占据在文档中的原始位置。元素的偏移量不会影响其他元素的位置。这使得相对定位非常适合用于微调特定元素的位置。
2. 绝对定位（Absolute Positioning）
绝对定位是一种更灵活和精确的定位方式。与相对定位不同，绝对定位将元素从正常文档流中移除，并将其相对于最近的父元素或根元素进行定位。
要使用绝对定位，我们需要在元素的CSS样式中将position属性设置为absolute。可以使用top、right、bottom和left属性来确定元素在网页中的精确位置。
绝对定位的一个重要特点是，元素的位置会受到其父元素定位属性的
影响。如果父元素没有设置定位属性或是使用默认的position值（static），那么元素会相对于根元素进行定位。
绝对定位非常适合用于创建自定义布局，如悬浮菜单、弹出窗口和轮
播图等。它可以让我们更加灵活地控制元素的位置和重叠关系。
3. 固定定位（Fixed Positioning）
html中常用的一些英文单词
html中常⽤的⼀些英⽂单词
html：中常见英⽂笔记
header 头部/页眉；
index ⾸页/索引；
logo 标志；
nav/sub_nav 导航/⼦导航；
banner 横幅⼴告；
main/content 主体/内容；
container/con 容器；
wrapper/wrap 包裹（类似于container）；
menu 菜单；
sub_menu/second_menu ⼦菜单/⼆级菜单；
list 列表；
section 分区/分块（类似于div）;
article ⽂章；
aside 侧边栏/⼴告；
footer 页脚/底部；
title/sub_title 标题/副标题；
news 新闻；
hot 热点；
pro 产品（product）；
company 公司；
msg/info 信息（message）/消息；
ads ⼴告（advertisements）;
icon ⼩图标；
img 图⽚（image）；
copyright 版权；
contact_us 联系我们；
friend_link 友情链接；
tel 联系电话（telephone）；
address 地址；
⼆、CSS样式（style）
CSS 层叠样式表 (Cascading Style Sheets) ；
background 背景；
position 位置/定位；
relative/absolute/fixed 相对定位/绝对定位/固定定位；
float 浮动；
clear 清除；
vertical-align: middle/top/bottom; 垂直居中/上/下；
HTML5+CSS3网站设计浮动与定位
6.4 元素地类型与转换
3.元素地转换
inline
此元素将显示为行内元素（行内元素默认地display属性值）。
display
block
此元素将显示为块元素（块元素默认地display属性值）。
i n l i n e - bloc
此元素将显示为行内块元素,可以对其设置宽高与对 齐等属性,但是该元素不会独占一行。
6.3 元素地定位
5.固定定位fixed
学习目地
了解固定定位,能够说出固定定位地 定位方式。 掌握实现绝对固定地方法。能够通 过fixed将元素地定位模式设置为固 定定位。
6.3 元素地定位
5.固定定位fixed
固定定位是绝对定位地一种特殊形式,它 以浏览器窗口作为参照物来定义网页元 素。当position属性地取值为fixed时, 即可将元素地定位模式设置为固定定位。
选择器{float:属性值;}
left right none
属性值
元素向左浮动 元素向右浮动 元素不浮动（默认值）
描述
6.1 元素地浮动
2.清除浮动
学习目地
掌握清除浮动地方法,能够为元素清 除浮动。
6.1 元素地浮动
2.清除浮动
为什么要清除浮动？
6.1 元素地浮动
2.清除浮动
由于浮动元素不再占用原文档流地位置,所以会对页 面其它元素地排版产生影响,如果要避免这种影响, 就需要对元素清除浮动。
htmlcss中float浮动的用法
htmlcss中float浮动的⽤法⼀、float基础⽤法⽰例
1、我们先建两个div盒⼦，设置⾼度、宽度和背景颜⾊；
最开始两个盒⼦在⽹页上的位置如下：
然后我们将红⾊盒⼦浮动到右边
然后我们会发现红⾊盒⼦浮动到了右边，但是蓝⾊盒⼦就直接上移到了原先红⾊盒⼦的位置。
然后我们将蓝⾊盒⼦也浮动到右边看看效果：
我们会发现它会紧跟着红⾊盒⼦排列，⽽不会受块级元素影响独占⼀⾏。
⼆、浮动定位的基本规则
1、当元素的float属性取值为left或right时，元素属于浮动定位;
2、若剩余空间⽆法放下浮动的盒⼦，则该盒⼦向下移动，直到具备⾜够的空间能容纳盒⼦，然后再向左或向右移动；
3、浮动盒⼦的顶边不得⾼于上⼀个盒⼦的顶边；
4、浮动盒⼦在摆放时，要避开常规流盒⼦；常规流盒⼦在摆放时，⽆视浮动盒⼦；
5、常规流盒⼦的⾃动⾼度计算时，⽆视浮动盒⼦
6、清除浮动：clear:both(左或右)。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
十.布局方式：
1.定位
1）静态定位：position:static（默认状态下的排列方法）
2）相对定位：position:relative
规则：
1、设置相对定位后元素移动，原来位置依然会被占据，移动位置是以参照物的左上角为基准。
2、不会影响其他的元素。
3、移动的参照物是，元素移动前所在的位置。
设置方式：
css相对应的选择器中书写
position:relative;
top:在原来位置向下移动（据上方的距离）
left:在原来位置向右移动（据左边的距离）
right:在原来位置向左移动（据右边的距离）
bottom:在原来位置向上移动(据下方的距离)
值：可以为负数。。向相反方向移动
3）绝对定位position:absolute
规则：设置绝对定位元素移动后，会把原先位置让出来
1、当设置绝对定位后，如果【没有父容器】，参照物是【浏览器】
2、当设置绝对定位后，如果有父容器，且父容器【没有被定位（为普通流）】，参照物是【浏览器】
3、当设置绝对定位后，如果有父容器，且父容器【被定位（为相对|绝对）】，参照物【父容器】
****重点注重两点：父容器和定位情况***
设置方式：
css相对应的选择器中书写
position:absolute;
top:据上方的距离
left:据左边的距离
right:据右边的距离
bottom:据下方的距离
4）固定定位：position:fixed 参照物只是浏览器.只对浏览器定位 被固定定位后的元素就算有父容器，也不会受到父容器的限制.
扩展属性css：z-index:数字值（没有单位） (设置了固定定位的元素就算有父容器也不会受到父容器的任何限制，不会受到任何的影响。只会以浏览器左上角为原点移动)
用法：两个都设置了定位(不论是何种定位)的盒子如果有重叠部分，都设置此属性，属性值大的盒子会压住属性值小的盒子
2.浮动float 浮动对块元素和行元素都有效果
流：在网页设计中指元素（标签）的排列方式
1）标准流(未浮动)：一种默认的方式，自上而下依次排列。
2）非标准流（浮动）：某个元素脱离了标准流（本身的位置），就成为了非标准流
规则：
1、设置了浮动的元素，脱离普通流，拥有自己的浮动方式，会水平排列。(跳到前面的界面)
2、会影响其他元素，也就是说其他元素会占据该元素的位置。
3、当父容器放不下多个设置的浮动的元素时，元素会自动换行。
4、当没有设置元素大小的时候，该元素会自适应内容大小，尽量减少自己所占得位置。
块级元素浮动：
1.浮动后的块级元素（非标准流）会认为没有浮动的块级元素
（标准流）占据空间，会在本行找原点(浮动后的元素会定着不动)
2.没有浮动的块级元素（标准流）会认为浮动后的块级元素（非标准流）不占据空间，会向上找原点(没有浮动的元素会往上顶)
行级元素浮动：
浮动后的行级元素会自动转为块级元素(注意：浮动的块级元素会对行级元素产生影响，行级元素会跟块级元素水平排列)
属性：
left：左浮动：元素从左至右排列
right：右浮动：元素从右至左排列
none：不浮动（默认值）
/******************************/
清除浮动：clear 不清除浮动的话以下的标准流会被浮动的元素遮盖。
left:清除左浮动
right:清除右浮动
both:清除左右浮动(最常用)（元素清除浮动后也可以做左右浮动）
none:不清除浮动