1.浮动的元素脱离了标准流 不再标准流中保留位置了，所以标准流中的元素会占据浮动元素的位置
（ 浮动的元素我们习惯性用标准流的盒子 包裹起来  ）

2. 浮动的元素 会让元素的显示模式发生改变变成具有行内块元素的特点（所以 我们的块元素设置了浮动以后才会同一行显示）

3. 浮动的子元素 参考父元素的内容区域对齐

4. 浮动的元素总是影响当前元素和 它后面的标准流中的元素  
CSS优先级
!important   
行内样式 style  1, 0, 0 ,0
id选择器  0， 1， 0， 0
类选择器   0 ，0 ，1，  0
标签选择器 0， 0， 0， 1
继承 和 * 通配符 0, 0, 0, 0
ul li  0 0 0 2
.nav li 0 0 1 1
行内样式 id   class   标签
0，      0，  0，      0
权重 值不存在进位
CSS 布局的三种机制

网页布局的核心——就是用 CSS 来摆放盒子。

CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：

• 普通流（标准流）
  • 块级元素会独占一行，从上向下顺序排列；
    • 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
      
      
  • 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
    • 常用元素：span、a、i、em等
      
      
    
    
• 浮动
  • 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
    
    
• 定位
  
  
  • 将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。
    
    

1.浮动的元素脱离了标准流 不再标准流中保留位置了，所以标准流中的元素会占据浮动元素的位置
（ 浮动的元素我们习惯性用标准流的盒子 包裹起来  ）

2. 浮动的元素 会让元素的显示模式发生改变变成具有行内块元素的特点（所以 我们的块元素设置了浮动以后才会同一行显示）

3. 浮动的子元素 参考父元素的内容区域对齐

4. 浮动的元素总是影响当前元素和 它后面的标准流中的元素  
CSS优先级
!important   
行内样式 style  1, 0, 0 ,0
id选择器  0， 1， 0， 0
类选择器   0 ，0 ，1，  0
标签选择器 0， 0， 0， 1
继承 和 * 通配符 0, 0, 0, 0
ul li  0 0 0 2
.nav li 0 0 1 1
行内样式 id   class   标签
0，      0，  0，      0
权重 值不存在进位
CSS 布局的三种机制

网页布局的核心——就是用 CSS 来摆放盒子。

CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：

• 普通流（标准流）
  • 块级元素会独占一行，从上向下顺序排列；
    • 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
      
      
  • 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
    • 常用元素：span、a、i、em等
      
      
    
    
• 浮动
  • 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
    
    
• 定位
  
  
  • 将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。