一、层叠的问题
CSS有两个性质：
1、继承性
2、层叠性：选择器的一种选择能力，谁的权重大就选谁
层叠性又分为：
1)、选不中：走继承性 （font、color、text、） 继承性的权重是0
若有多个父级都设置了样式，走就近原则
2)、选中了
a、权重的问题，权重大，就选谁的样式
b、权重相同，谁在后，选择谁
*纯标签和类没有可比性，纯类和ID也没有可比性
二、标准文档流
1、含义：浏览器的排版是根据元素的特征（快和行级），从上往下，从左到右排版，这就是标准文档流
2、浮动 float：left/right
效果：
1)、块级加float
a：两个元素都加浮动，后面的元素会紧跟前面的元素并排排列，只要加了float，这个元素就会脱离标准文档流
b：第一个加了float，脱离了标准文档流，对于浏览器来说，第二个元素就变成了标准文档流中的第一个，于是就会把他排在第一位，而第一个依然存在，所以就会叠加
2)、行级加float
行级元素加float，脱离标准流，块不像块，行不像行，但能设置宽高，能并排排列，但Display就没有意义了
拓展：
使用元素标准流的方法：
a、浮动：float
b、绝对定位：position：adsolute；
c、固定定位：position：fixed； （fixed 固定的）
2、浮动带来的好处
给元素加了浮动，撑不起父级的高度了
3、清除浮动
a、给浮动的父级添加高度
b、给父级添加overflow：hidden；
c、给浮动元素的后面添加一个空的div，添加样式为clear：both；
<ul>
<li>首页</li>
<li>新闻</li>
<div style-clear:"both;"></div>
</ul>
d、给浮动元素的父级添加一个类叫clearfix （clearfix 清除格式）
这个类的写的样式属性有：
.clearfix：after{
content:"";
display:"block";
clear:"none";
height:0;
visibility:"hidden"; visibility 可见的
}
*注：伪类选择器
只要选择后面带；都可以说他是伪类选择器
a：hover{} a：visited{} a：active{} p：after{} p：before；
超链接的四种状态：
a：link{
color：blue；
}
a:visited{
color：red；
}
a：hover{
color：green；
}
a：active{
color：yellow；
}
*这四种超链接的状态的顺序不能改变
伪元素和伪类选择器的区别：
伪元素有两个冒号，如 P：after{} 伪类选择器有一个冒号，P：hover{}
注：
1、margin：0 auto；和text-align：center；
margin的居中是对自身； text-align是对元素内部的文本集中的
2、visibility：hidden；和display：none；
visibility：隐藏之后还占据空间
display：隐藏后不占据空间