基本图片与文字布局（浮动，包含块）

正常流中：

1.块级元素（

• ...）：换行，独自占一行显示，就算有足够的空间并排，也会在下一行显示，可以设置width宽度
  2.行内元素（ ...）：若有足够的空间并排，就会并排显示
  3.定位为relative仍在流中

  
  

  脱离正常流：

  1.设置宽度width并浮动
  

  2.定位为absolute 或 fixed

  
  

  浮动父级元素：

  错误原因：规定若父级包含块的元素都是浮动元素，则浏览器默认父级包含块高度为0，包含块只出现边框，原来所占的空间仍然存在。

  解决方法1：（推荐）

  CSS中父级包含块的属性里添加     

   overflow:auto;     /*   或  overflow:hidden;  */

  解决方法2：

  为父级包含块设置高度height

  height:400px;

  解决方法3：

  在包含块里最后添加 

  CSS中添加
  

    .clear{
                clear:both;
            }

  
  

  例子

  1.正常流中显示

  
  
  
  	
  	
  
  
  	
  	
  文本略
  	
   
  
  

  2.图片向左浮动

  img{
  		float: left;
  	}

  3.增加包含块并设置CSS属性

  
  
  
  	
  	
  	
  
  
  	
  
  		
  		
  文本略
  		
  	
  

  
  
  4.文字向右浮动（必须设置width才能浮动），此时包含块中都是浮动元素，出现问题

  article{
  		float: right;
  		width:320px;
  	}

   
    5.最后效果

  
  
  
  	
  	
  	
  
  
  	
  
  		
  		
  文本略