CSS 清除浮动问题

html-css012

CSS 清除浮动问题,第1张

clear是子模块之间限定的,如下:

<div id="a">

<div id="1"></div>

<div id="2"></div>

</div>

1和2之间,用clear来限定。

而overflow:hidden是父模块对子模块来用的。就是a对于1和2模块的限定。

clear非常好理解,主要是overflow:hidden不这么好理解,我发一篇文章给你看看,这个你看完就非常明白是什么意思了。(这是我看到的一篇文章,讲的最透彻的)

overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。

一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢?我们下面来详细的阐述一下。

<div id="wai">

<div id="nei"></div>

</div>

这是一个常用的div写法,下面我们来书写样式。大家可以在DMX中自己做试验

#wai{ width:500px background:#000height:500px}

#nei { float:leftwidth:600pxheight:600pxbackground:red}

可以看到,我给nei这个id加了一个浮动,我们常规的理解是,我们允许nei这个id的div的右边出现其他的内容,只要它的宽度不超过wai这个div和nei这个div的剩余值。

如果div wai中还包含其他的div,我不允许它出现在nei的右侧,我们则用样式clear:both指定这个div,不允许它浮动在nei右侧。

这些在ie6里面是正确的。但是在火狐或者其他浏览器里面,我们发现问题并非如此简单。我们发现,当nei这个div的宽度和高度都大于wai这个div的时候,wai并没有被内撑开而是依旧显示为我们指定的宽高。在我的例子中,都是500。

这个时候我不理解了,我搜索了很多的资料,但是都没能理解这是为什么,直到看到别人在类似的情况下给wai这个div加了一个overflow:hidden这个属性解决了这个问题。

我们直到overflow:hidden这个属性的作用是隐藏溢出,给wai加上这个属性后,我们的nei的宽高自动的被隐藏掉了。另外,我们再做一个试验,将wai这个div的高度值删除后,我们发现,wai的高度自动的被nei这个div的高度值给撑开了。

说到这里,我们再来理解一下“浮动”这个词的含义。我们原先的理解是,在一个平面上的浮动,但是通过这个试验,我们发现,这不仅仅是一个平面上的浮动,而是一个立体的浮动!

也就是说,当nei这个div加上浮动这个属性的时候,在显示器的侧面,它已经脱离了wai这个div,也就是说,此时的nei的宽高是多少,对于已经脱离了的wai来说,都是不起作用的。打个形象的比喻就是当JJ脱离BB的时候,JJ的大小对于BB是没有撑开的作用的(有点少儿不宜的感觉-_-|||)

OK,当我们全面的理解了浮动这个词的含义的时候,我们就理解overflow:hidden这个属性中的解释,清除浮动是什么意思了。也就是说,当我们给wai这个div加上overflow:hidden这个属性的时候,其中的nei等等带浮动属性的div的在这个立体的浮动已经被清除了,就好比JJ又进入了BB内,JJ的大小自然又会影响到BB的大小。

这就是overflow:hidden这个属性清除浮动的准确含义。

当我们没有给wai这个div设置高度的时候,nei这个div的高度,就会撑开wai这个div,而在另一个方面,我们要注意到的是,当我们给wai这个div加上一个高度值,那么无论nei这个div的高度是多少,wai这个高度都是我们设定的值。而当nei的高度超过wai的高度的时候,超出的部分就会被隐藏。这就是隐藏溢出的含义!

我相信,通过我的这些文字,大家对overflow:hidden这个属性有了全新的认识。希望大家和我一样,在div+css学习中能够不断的进步!

希望子元素撑开父级元素可以使用以下两种方法:

1、父级版元素宽度不固定,父级元素设置为inline-block或者添加float;

2、对父级元素使用min-width,这样只限制了最小的宽度,如果子元素变宽,父级同样会变宽。

3、首先父类元素必须不是相对定位,如果是相对定位宽度就会默认为百分百。所以必须是绝对定位或者fixed。其实设置了这一步,父类的div已经达到要求了。

4、用第三种方法有个不足之处就是,如果子类运用了浮动的话,因为浮动会会脱离文档流,所以不能撑开父类,这时候可以给父类元素加一句overflow:hidden这样就可以让浮动元素也撑开父类。

扩展资料:

当子元素全部浮动时如何解决父元素无法撑开的解决办法:

1、父元素添加高度。

此方法可以将父元素显示出来。

缺点:但当调整子元素高度的时候,若要实现父元素包含子元素的效果,就也要调整父元素高度。实在很麻烦!所以此方法不要用!

2、父元素也添加浮动。

以暴制暴的方法!别人浮起来自己也要跟着一起浮。

缺点:虽然可以解决问题,但是后面要添加有不需要浮动的子元素,则影响其显示。

3、给父元素添加overflow:hidden;

缺点:一旦包含非浮动的子元素,则会影响其显示。

4、给父元素添加一个无关的元素,让添加的无关元素去清除浮动 clean:both;

缺点:添加了一个无关元素,代码阅读受影响。

5、通过伪类来实现,在需要清除浮动的父元素里,添加一个清除浮动的伪类。

推荐此方法,比较高级,而且没有以上缺点。