三大元素的特点

1. 块级元素会独占一行，从上向下顺序排列；
常用的块级元素元div、hr、p、h1~h6、ul、ol、dl、form、table


2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
常用的行内元素元素：span、a、i、em等

3 . 行内块元素，独占一行可以设置宽高
常用的块级元素：img ，input ，td， textarea



4. 浮动元素与父盒子的关系
- 子盒子的浮动参照父盒子对齐
- 不会与父盒子的边框重叠，也不会超过父盒子的内边距

5.  浮动元素与兄弟盒子的关系
在一个父级盒子中，如果前一个兄弟盒子是浮动的，那么当前盒子会与前一个盒子的顶部对齐；
普通流的，那么当前盒子会显示在前一个兄弟盒子的下方
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流


二 . 清除浮动的4种方法
5. 是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可
6. 可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。
7.  使用after伪元素清除法.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   
.clearfix {*zoom: 1;}   /* IE6、7 专有 */
8.使用双伪元素清除浮动.clearfix:before,.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
  *zoom:1;
}

三大元素的特点

1. 块级元素会独占一行，从上向下顺序排列；
常用的块级元素元div、hr、p、h1~h6、ul、ol、dl、form、table


2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
常用的行内元素元素：span、a、i、em等

3 . 行内块元素，独占一行可以设置宽高
常用的块级元素：img ，input ，td， textarea



4. 浮动元素与父盒子的关系
- 子盒子的浮动参照父盒子对齐
- 不会与父盒子的边框重叠，也不会超过父盒子的内边距

5.  浮动元素与兄弟盒子的关系
在一个父级盒子中，如果前一个兄弟盒子是浮动的，那么当前盒子会与前一个盒子的顶部对齐；
普通流的，那么当前盒子会显示在前一个兄弟盒子的下方
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流


二 . 清除浮动的4种方法
5. 是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可
6. 可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。
7.  使用after伪元素清除法.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   
.clearfix {*zoom: 1;}   /* IE6、7 专有 */
8.使用双伪元素清除浮动.clearfix:before,.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
  *zoom:1;
}