一、行内标签和块状标签

HTML标签的分类可以分为行内标签和块状标签，在默认情况下，他们的特点如下：

行内标签特点：（1）从左向右排列；（2）不能设置元素的宽度和高度

块状标签特点：（1）从上向下排列；（2）可以设置元素的宽度和高度

常用行内标签有：、、

常用块状标签有：

…

、

、

• 备注：HTML标签的显示类型是行内还是块状，元素本身是有自己的默认值的，但是我们也可以通过display样式来修改其显示类型。

  二、display

  display 属性设置元素的显示类型。

  设置元素显示类型为行内：

  div{display: inline;}
  

  设置元素显示类型为块状：

  div{display: block;}
  

  设置元素显示类型为行内块状：

  div{display: inline-block;}
  

  备注：display: inline-block;表示该元素既有行内的特征，又有块状的特征；具体表现为：排列方式为行内排列方式，即可以从左向右排列，并且也有块状的特征，可以设置元素的宽度和高度。

  设置元素隐藏：

  display: none;
  

  备注：上述语法可以设置元素隐藏，和设置visibility是有区别的，通过设置display隐藏，将隐藏整个元素，元素占用的网页位置也会消失，而通过设置visibility隐藏，是隐藏的元素内部的内容，元素仍然保持原来的位置和大小。

  三、浮动

  CSS 的 Float（浮动），会使元素向左或向右排列，其周围的元素也会重新排列。

  如果希望将默认情况下从上向下排列的3个DIV从左向右排列，可以进行如下设置：

  #div1,#div2,#div3{
      width: 200px; height: 200px; margin: 10px;
      background-color: red;
      float: left;  				
  }
  #divbig{ width: 800px;}
  

  
      
  div1
      
  div2
      
  div3
  
  

  样式表中设置了div1,div2,div3三个div的float:left; 所以三个DIV可以从左向右排列，如果设置成float:right; 也可以设置这三个DIV从右向左排列。

  在上述代码中，三个小DIV的高度都是200px；通过浏览器调试可以发现包含三个小DIV的大DIV，即divbig的高度为0。这个是不合理的，大DIV的高度应该最少在200px；这种现象叫做"浮动塌陷"，浮动塌陷会给只有的网页排布带来不可预知的麻烦，所以我们必须要解决浮动塌陷问题。

  四、清除浮动

  clear 属性指定元素两侧不能出现浮动元素

  clear:both;  
  

  五、浮动塌陷的解决方案

  （1）固定父亲容器的高度解决塌陷

  #div1,#div2,#div3{
      width: 200px; height: 200px; margin: 10px;
      background-color: red;
      float: left;  				
  }
  /*在这里设置固定高度解决浮动塌陷*/
  #divbig{ width: 800px; height:210px;}  
  

  
      
  div1
      
  div2
      
  div3
  
  

  此方案不够灵活，如果子元素实际高度发生变化，必须要同时修改父元素的高度才行。

  （2）空div解决塌陷

  #div1,#div2,#div3{
      width: 200px; height: 200px; margin: 10px;
      background-color: red;
      float: left;  				
  }
  #divbig{ width: 800px;}
  .clear{ clear: both;}   /*在此处设置清除两侧浮动*/
  

  
      
  div1
      
  div2
      
  div3
      
    
  
  

  此方案也不够灵活，需要修改HTML结构代码。

  （3）父级添加overflow属性解决塌陷

  #div1,#div2,#div3{
      width: 200px; height: 200px; margin: 10px;
      background-color: red;
      float: left;  				
  }
  #divbig{ width: 800px; overflow: hidden;}  /*此处设置overflow属性解决塌陷*/
  

  
      
  div1
      
  div2
      
  div3
  
  

  overflow设置内容溢出当前容器的处理方式，各个取值的含义如下：

  overflow: visible;  /*溢出部分可见*/
  overflow: hidden;   /*溢出部分不可见*/
  overflow: scroll;   /*容器产生滚动条*/
  overflow: auto;	    /*当有内容溢出的时候产生滚动条，没有内容溢出的时候不产生滚动条*/
  

  （4）父级添加伪类after解决塌陷

  #div1,#div2,#div3{
      width: 200px; height: 200px; margin: 10px;
      background-color: red;
      float: left;  				
  }
  #divbig{ width: 800px;}
  /*添加伪类after解决塌陷*/
  .clear:after{
  	content: '';         
  	display: block;      
  	clear: both;          
  }
  

    
      
  div1
      
  div2
      
  div3