对于float属性的一些理解

  今天下午,几个人在屋里研究了一下css的float属性,因为这是一个很有用也让人很蛋疼的属性,下面把自己的一些小理解分享一下~

 

首先,我们先来写一个有三个div是float的一个页。。。


额。。。好吧,怎么看着有点儿像某个国家的国旗?!。。。。  好吧好吧,先这样吧。。。。

然后我们在这三个div下面在加一个div,但是不设置float属性。。。


有木有发现什么?  是滴,这个div直接无视掉了前面三个div,丝毫无压力的占据了三个div底下最靠上的位置。。。。

一般按照我们的理解,这个新的div应该是会被前面三个div的位置挤下去,呆在屏幕下面的位置,而现在它却好像是与另外三个div平起平坐的位置,丝毫没有感觉到它们的存在。。。

这是为什么呢? 我们的一种猜测是,float的元素是没有体积的,他们的体积是单独算的。。。

那么我们来试一下。。。。

我们把最外面的box的的高度去掉来看一下效果。。。


可以看到,最外面的box高度只是blue这个div撑起来的一点,也丝毫没有三个float的div的存在感。。。

那么,基本上就可以证明float元素的体积是不与其他元素一起计算的。。。

但是,float元素它们到底在哪呢?

由刚才的实验我们看到,float元素是浮在其他元素之上的。。。。

 

总结一下今天下午的理解:

float元素是类似于漂浮物的浮在其他元素之上,而其他元素则是类似于在水下的感觉,对于它们来说,它们是感觉不到float的存在的,这也就出现了前面的无视float元素体积的现象。。。。

而大部分时间我们是希望其他元素能感觉到float元素的存在的,这时候,我们有2种办法:

一种方法是:我们可以把其他元素也写上float属性,使它们从水底浮到水面上来,与float元素一层,这样也就感觉到float元素了。。。

还有一种方法就是:我们可以在float元素后面加上一个div,这个div写上clear属性,就是这样。。。。


这样的话,它会清除float元素的影响,让其他元素可以感知到float元素的存在,从而实现我们想要的效果。。。。

 

嗯嗯,大概就是这个样子,有什么理解不对的地方还请大牛们多多指教哈~   

标签: css, float

暂无评论

  1. float是一个很复杂的属性,要熟悉,还要下点功夫,特别是IE6下,float引起的问题特别多,还有,注意清除浮动,不然你会死得很难看

    1. @小松:{img:30}嗯嗯,o(∩_∩)o 哈哈~ 还希望小松哥多多指教哈~{img:5}

  2. 学习了。

    1. @WXYOO1:{img:5}欢迎光临哈~ o(∩_∩)o 哈哈

添加新评论

icon_question.gificon_razz.gificon_sad.gificon_evil.gificon_exclaim.gificon_smile.gificon_redface.gificon_biggrin.gificon_surprised.gificon_eek.gificon_confused.gificon_cool.gificon_lol.gificon_mad.gificon_twisted.gificon_rolleyes.gificon_wink.gificon_idea.gificon_arrow.gificon_neutral.gificon_cry.gificon_mrgreen.gif