CSS浮动和清除
float:让元素浮动，取值：left(左浮动)，right(右浮动)；
clear:清除浮动，取值left(清除左浮动)，right(清除右浮动) both(左右浮动都去掉)；
1，CSS浮动
浮动的元素，将向左或躺浮动，浮动到包围元素的边上，或上一个浮动元素的边上为止，
浮动的元素，不再占空间了，并且，浮动元素的层级要高于普通元素（优先于普通元素显示）。
浮动的元素，一定是块元素了，不管原来是什么元素。
浮动的元素，没有指定宽度的话，浮动后它将尽可能的变窄，因此浮动元素一般要定宽和高。
浮动的功能：可以实现多个块元素并列排版；
2，CSS清除浮动
CSS清除浮动的功能有两个：（1）可以包围元素从“视觉上”包住浮动元素（2）清除之下的其它元素将恢复默认排版。
有浮动，就得有清除；
如果包围元素指定了高度，那么可以不清除；
CSS继承性
CSS属性继承：外层元素的样式，会被内层元素进行继承，多个外层元素的样式，最终都会“叠加”到内层元素上；能被继承的属性有：
1，CSS文本属性都会被继承：
color,font-size,font-family,font-style,font-weight,text-align,text-decoration,text-indent,letter-spacing,line-height;
CSS优先级
1，单个选择器的优先级:
行内样式>ID选择器>class选择器>标签选择器
2,多个选择器的优先级：
多个选择器的优先级，一般指向越准确，优先级越高；
特殊情况下，我需要假设一些值：
标签选择器的优先级为1；
class选择器的优先级为10；
ID选择器的优先级为100；
行内样式的优先级为1000；
如果优先级相同时，后执行的代码将覆盖前面的代码，代码的一般执行顺序为从上到下，从左到右；
利用CSS浮动排版的一个例子如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS=浮动</title><style type="text/css">/* 全局CSS样式 */body,ul,li,a,img {margin: 0;padding: 0;}ul,li {list-style: none;}a:link,a:visited {color: #007FFF;text-decoration: none;}a:hover {color: red;}body {font-size: 12px;font-family: 宋体;}/* 一个模块的CSS样式 */.div {width: 300px;margin: 20px auto;/* 居中 */}.div img {width: 100px;height: 150px;border: none;padding: 2px 0;}body {background-color: #00FFFF;text-align: center;}.div li {text-align: center;background-color: #CDCDCD;float: left;padding: 5px 10px;}.div.ul.li a {float: right;}</style></head><body><div class="div"><ul><li><a href="#"><img src="images\td.jpg" /></a><br /><a href="#">曹伟-玩酷我的程序人生</a></li><li><a href="#"><img src="images\td1.jpg" /></a><br /><a href="#">王东方-辣妈挑战PHP</a></li><li><a href="#"><img src="images\td2.jpg" /></a><br /><a href="#">康红红专题-因为爱情</a></li><li><a href="#"><img src="images\td3.jpg" /></a><br /><a href="#">刀郎-的第一场雪</a></li></ul></div></body></html>
显示效果如下：
