这是第1个盒子
      
    
      
       这是第2个盒子
      
    
      
       这是第3个盒子
      
     

    
              
     
      这是一个div1
     
 
     
      这是一个div2
     
 这是一个span1 这是一个span2

    
             
     
     
          
      
       
      
    
      
       
      
    
      
       
      
    
      
               浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。    
      
    
      
     

div {
       margin:10px;    padding:5px;}#father {
       border:1px #000 solid;    /*02.给父级设置高度防止边框塌陷    height: 350px;*/    /*03.overflow防止边框塌陷    overflow: hidden;*/}.layer01 {
       border:1px #F00 dashed;    float: left;}.layer02 {
       border:1px #00F dashed;    float: left;}.layer03 {
       border:1px #060 dashed;    float: left;}.layer04 {
       border:1px #666 dashed;    font-size:12px;    line-height:23px;    width: 200px;    float: left;}/*04.after伪类防止父类边框塌陷*/.clear:after{
       content: ''; /*在clear元素之后添加一个空内容*/    display: block;/*把添加的内容转换成了块元素*/    clear: both;/*清除这个元素所有的浮动*/}/* 01.空div标签.clear{    clear: both;    margin: 0px;    padding: 0px;}*/

    
               
     
      
            
      
这是一张图片这是一张图片这是一张图片这是一张图片这是一张图片          这是一张图片这是一张图片这是一张图片这是一张图片这是一张图片          这是一张图片这是一张图片这是一张图片这是一张图片这是一张图片          这是一张图片这是一张图片这是一张图片这是一张图片这是一张图片