行内元素 块元素 行内块元素 及其属性

一、 块级元素独占一行 

       行内元素能够在一行显示，可是不能设置上下的padding和margin值。

块级元素能够设置 width, height属性，行内元素设置width,  height无效

块级元素能够设置margin 和 padding.  

行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，

可是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。

（即行内元素水平方向有效，竖直方向无效）

二、块级元素转行内元素：display:inline;

       行内元素转块级元素：display:block;

三、常见的块级元素、行内元素与行内块元素   

       块级元素 ：div、h系列、li、dt、dd、p

       行内元素  ：span、u、a、、em、b、i、u、em

      行内块元素：input 、img 、button 、texterea 、label。

浮动之后必定要给父元素添加overflow

当li设置float:left;的时候，它的父元素就不会随着li的增多自适应高度(主要是FF等浏览器)，因此，若是父元素有背景的话是不会随着li的高度增长而出现的。
这个时候能够给父元素加1个属性，overflow:hidden;

为何li在浮动(float)时，给父元素加1个属性，overflow:hidden;父标签就能自适应高度

 

解决float浮动带来的父元素高度没有的问题---清除浮动

float的特性 ：

1：使元素block块级化；

2：破坏性形成的紧密排列特性。

基于以上的特性，使得咱们一般把浮动用来布局，带来的问题是，容易出问题，重用性不行，ie6-的版本下不少问题，由于它是要求固定的宽度，宽度计算错误就会带来整个布局的错乱。
float属性出现的初衷是为了让文字环绕图片实现图文混排的效果和应用于流体布局，因此float浮动带来的父元素高度没有的问题并非咱们说的是一个  BUG，这自己就是float的特性。

如下是解决float浮动带来的父元素高度没有的问题

测试为IE5+
1：在父元素的里面浮动元素的后面添加一个样式为clear:both;的元素；缺点是添加了无用的标签元素；
.clear{ clear:both; height:0px; font-size: 1px; line-height: 0px;overflow:hidden; }/* 清除浮动*/


2：给父元素添加伪类并给样式（.fix应用在包含浮动子元素的父元素上）
.fix:after{content:"";display: block;height: 0;overflow: hidden;clear: both;}
.fix{*zoom:1;}  //兼容ie7如下
或者
.fix:after{content:"";display: table;clear: both;} .fix{*zoom:1;} 3：直接给父元素添加一句样式： 父元素{overflow: hidden;}