页面布局中常用的清除浮动的方法


我们在页面布局时,基本上避免不了使用float,但由此也会引发一些问题,尤其是在容器高度不固定时,此时它的高度完全是由内部的元素撑开的。如果内部元素还是浮动的,那么由于内部的元素脱离了文档流,父容器就不能被撑开了。如果父容器设置的有背景或者边框的话,此时就不能正常显示了,另外,父容器下边的其他容器或内容也会跟着向上“浮”, 占据上面的子容器应该占据的位置。那么,这时就需要清除浮动了。

这里总结的几种的方法主要就是针对类似于上面的问题的,但也不仅限于以上问题。主要有以下几种方法:

1、添加空标签

2、对浮动元素设置display: inline-block

3、父容器设置overflow值auto或hidden

4、clearfix方法(css伪类:after)

下面就根据例子来分别看一下。

html结构如下:

<div class="cont1">
    <div class="cols1">cols1</div>
    <div class="cols2">cols2</div>
    cont1
</div>
<div class="cont2">cont2</div>

cont1高度不固定,cols1和cols2浮动,cont2高度固定在cont1下面。

不清除浮动时的效果:

页面布局中常用的清除浮动的方法

理想效果:

页面布局中常用的清除浮动的方法

 

下面就分别用这几种方法实现一下:

1、添加空标签

我们在容器cont1的最后面添加空标签clear:

<div class="cont1">
    <div class="cols1">cols1</div>
    <div class="cols2">cols2</div>
    cont1
    <div class="clear"></div>
</div>
<div class="cont2">cont2</div>

然后对clear添加css代码就可以了:

.clear {
    clear: both;
}

缺点:产生了无语义的标签。

2、对浮动元素设置display:inline-block;

只需对原来浮动的元素设置css属性display:inline-block;,并且去除float属性就可以了。

.cols1, .cols2 {
  ...
   display: inline-block;
  ...
}

缺点:设置inline-block后元素之间可能会有间隙,需要给父元素设置font-size:0;子元素再次设置相应的字体解决。

3、父容器设置属性overflow,值为auto或者hidden

.cont1 {
  ...
  overflow: auto; /*hidden也可以*/
  ...
}

注意:overflow:hidden;会使超出父元素之外的部分切除,建议使用auto

4、clearfix方法

这里是通过css伪类实现的,单独写一个clearfix类,通过这个class清除浮动,哪里需要就在哪里加上这个class就ok了。

.clearfix:after {
    display: block;
    clear: both;
    content: '';
    width: 100%;
    height: 0;
    font-size:0;
}

我们通过以上四种方法实现了清除浮动,但这些方法究竟哪一个比较好用?我们来对比一下。

方法一产生了无意思的空标签,破坏语义;方法二会出现空白间隙问题,还需要通过font-size:0;来解决,麻烦;因此,推荐使用方法三或者是方法四。


发表评论

电子邮件地址不会被公开。

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>