文章目录
  1. 1. 空DIV
  2. 2. overflow + Zoom
  3. 3. after+zoom
  4. 4. 给浮动的元素的容器添加浮动
  5. 5. 父级加高 height
  6. 6. display:inline-block
  7. 7. 总结

应用DivCSS网页布局,经常性地会使用到float,然后经常会出现布局错乱的情况。清除浮动是必须的。

在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出。为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。

代码:

.title{
    background-color: #FFF;
    color: #000;
}
.title-left{
    float:left;
}
.title-right{
    float:right;
}

<div class="title">
    <div class="title-left">Left浮动</div>
    <div class="title-right">Right浮动</div>
</div>

浮动产生效果如下:

下面我们就介绍清除浮动的方法:

空DIV

在浮动元素后使用一个空元素如<div class=”clear”></div>,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用


来进行清理。

<div class="title">
    <div class="title-left">Left浮动</div>
    <div class="title-right">Right浮动</div>
    <div class="clear"></div>
</div>

优点:简单,代码少,浏览器兼容性好。

缺点:增加了无意义的结构元素

overflow + Zoom

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。

在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。

.title{
    background-color: #FFF;
    color: #000;
    overflow: hidden;
      *zoom: 1;
}

优点:代码简洁,涵盖所有浏览器。

缺点:overflow:hidden;是个小炸弹,要是里面的元素要是想来个margin负值定位或是负的绝对定位,岂不是直接被裁掉了,所以此方法是有不小的局限性的。

after+zoom

结合 :after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。

.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }

.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
}

<div class="title clearfix">
    .....
</div>

通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格”020”或点”.”,并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout。

此方法可以说是综合起来最好的方法了,不会影响任何其他样式,通用性强,覆盖面广,值得推荐。

给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。

父级加高 height

父级div手动定义height,就解决了父级div无法自动获取到高度的问题。

优点:简单,代码少,容易掌握

缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题

display:inline-block

父级元素设定显示属性 display:inline-block,对于除IE6、7之外的浏览器均是支持的,特殊就在于IE6/7下会触发hasLayout,使得在各大浏览器下都是兼容的。

优点:可以做到兼容

缺点:代码换行会被解析

总结

通过上面的例子,我们不难发现清除浮动的方法可以分成两类:

一是利用 clear 属性,包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素,其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文),使到该父元素可以包含浮动元素。

在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式;在小模块如ul里使用overflow:hidden;(留意可能产生的隐藏溢出元素问题);如果本身就是浮动元素则可自动清除内部浮动,无需格外处理;正文中使用空DIV方法清理之前的浮动。

文章目录
  1. 1. 空DIV
  2. 2. overflow + Zoom
  3. 3. after+zoom
  4. 4. 给浮动的元素的容器添加浮动
  5. 5. 父级加高 height
  6. 6. display:inline-block
  7. 7. 总结