怎么解决div覆盖内容却没覆盖的问题?_html/css_WEB-ITnose

原创

2016-06-24 11:57:24 1541浏览

   1: 

   2: 

   3: 

   4: 

   5: 

   6: 

  12: 
 
 

  13: 

  14: 

  15: 
内容左

  16: 
内容右

  17: 

  18: 
boxb盒子里的内容

  19: 

  20: 

一般想需要将“.boxa”和“.boxb”布局是上下结构，从上图发现在浏览器中看到效果是两个盒子里内容是实现上下结构效果，但“.boxb”这个DIV跑到“.boxa”下面去了，但内容没有发生覆盖，只有DIV发生覆盖现象。

这 个原因是因为第一个大盒子里的子级使用了浮动float属性而产生了浮动，所以导致“.boxa”没有被撑开，而同级的“.boxb”盒子与 “.boxa”紧贴，而“.boxa”高度没有，“.boxa”的子级浮动的与“.boxb”不是同级，“.boxb”盒子依然认为“.boxa”没有高 度，所以导致“.boxb”DIV盒子就跑到“.boxa”子级DIV盒子下面形成了覆盖重叠现象。

问题解决办法，测试有三种：

1、给boxa添加一个height属性，height的值必须大于或等于baxa-l的高度

   1: 

2、清除浮动

在“.boxa”盒子闭合前加clear样式清除浮动。

   1: //css

   2: .clear{ clear:both}

   3:

   4: //修改boxa

   5: 

   6:     
内容左

   7:     
内容右

   8:     

   9: