DIV+CSS清除浮动方法总结-一只有梦想的前端小白

DIV+CSS 清除浮动是页面布局中常见的问题，相信各位高手也都有自己的方法，今天在这里对常见的几种方法进行总结（PS：谈不上是原创，这里是我自己做的归纳总结，也是我自己内化的过程），希望对您能够有所帮助。感谢博客园平台！---- 来自

DIV+CSS 浮动效果是指，父元素在未定义高的情况下，由于子元素全部浮动脱离文本流，而造成父元素高的塌陷（PS:正常情况下，父元素的高是由子元素撑起来）；或者因为部分子元素的而浮动，脱离文本流而造成其他元素的布局错乱的情况。

DIV+CSS 清除浮动 常见的方法如下：

1、给未加浮动的子元素的CSS添加 clear: both;若子元素都有浮动时，可以新增加一个空的子元素，并且给其的CSS添加 clear: both;这样可以利用清除左右浮动的子元素重新撑起父元素的高，从而达到清除浮动的效果。代码及效果如下：

   style   type  ="text/css"  >   
.fl  {  float  :  left  ;  }   
.demo  {  background  :  #ccc  ;  }   
.item1  {  background  :  #F571E3  ;  height  :  100px  ;  width  :  100px  ;  }   
.item2  {  background  :  #21B2F7  ;  height  :  200px  ;  width  :  100px  ;  clear  :   both  ;  }  
   style  >  
   head  >  
   body  >  
       h2  > 用 clearfix 清除浮动   h2  >  
       div   class  ="demo"  >  
           div   class  ="fl item1"  >  div  >  
           div   class  ="item2"  >  div  >  
       div  >  
   body  >  

查看更多关于DIV+CSS清除浮动方法总结-一只有梦想的前端小白的详细内容...