好程序员网络前端学习路线分享CSS浮动——清除浮动篇

  

  网络前端学习路线分享CSS浮动——清除浮动篇,为什么要清除浮动

  

这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响。那么到底会有什么影响呢?

  

  

  

举个例子我们看一下。

  

  <强>      

  

  div0                                                                     

  

  div1   

  

  <强>      

  

  div0         

  

  <强>      

  

  aaa            <强>高度塌陷

  

我们其实是希望一个容器中的内容不断的撑开容器的高度,这样我们后续的内容就可以紧贴在上面了,而网页中的内容并不是都是静态的,很多都需要每天更新,更新的内容多少,图片高度,都不相同。那么后面的东西想要紧贴上面的内容,上面内容的高度就不能设置一个固定数值,否则很多数据的时候放不下。如果不设置高度,一旦设置浮动后,就会出现高度塌陷。丢失了高度后,页面后续的内容就会插在上面内容的底部,页面就会错乱,因此我们就需要做清除浮动来解决这个问题,最终做到即使使用浮动,外容器也会因为内容的多少自动撑开高度,不会高度塌陷。

  

margin设置值不能正确显示

  

        

  

  css填充                     

  

  黄东海

  

  黄东海

  

  均            

  

Box             盒子      ,display                            

  

1   块级框:display                   rmatting上下文   

  

2   inline-level框:display                      

  

3   插入框:css3    

  

格式context                                        

  

黄东海(块格式化上下文)                           

  

  

  

(1)   盒子   

  

(2)盒子                           

  

(3)   保证金的盒子                     

  

范克廉(4)         

  

范克廉(5)   

  

(6)   均   

  

  均   

  

  黄东海

  
      <李>      均   
  

这种不能考虑,因为都不是根元素

  
      <李>设置高度
  

显然也是不可以的。

  
      <李>浮      
  

本来就要设置浮动的,所以也不考虑

  
      <李>位置            
  

这样设置后,就失去浮动的意义了。因此也不使用

  
      <李>显示      
  

虽然可以开启,但是导致父元素原有宽度丢失

  
      <李>溢出      
  

  溢出               

  

  汽车   

  

  

  

清除:两者间,顾名思义就是清除浮动

  

  <强>      

  

  明确:                                 

  

因此我们做了一个修改

  

              

     
     
     
     
     
     
     
  
     
     
     
     
     
     
     
     
           
  ,,,,,,, 。   <强> clearFloat :   <强> 后   <强>   
  <>强,,,,,,,, {   
           
  ,,,,,,,,,,,,   <强>显示:,   <强>块;   /*            
  

好程序员网络前端学习路线分享CSS浮动——清除浮动篇