博百优CSS:浮动定位模式

昨天博百优提及CSS定位中忘记了提及浮动定位模式,浮动的框可以左右移动,直到它的外边缘碰到包含框或另外一个浮动框的边缘。因为浮动框不在文档的普通流中,所以博百优认为文档的普通流中的块狂表现得就像浮动框不存在一样。

如博百优图2-13所示,当把框1向右浮动的时候,它就会脱离文档并且向右移动,直到它的右边缘碰到包含框的右边缘位置,下面看看博百优图:

博百优浮动

在博百优下面的一张新图中,博百优展示当把框1向左浮动的时候呢,它就脱离文档流并且向左移动,直到它的左边缘碰到包含看的左边缘为止。因为它不再处于文档流中的,所以博百优认为他其实并不是很占空间,实际上就盖住了框2,使得框2在你和博百优视野中消失。如果把三个框都向左移动呢,那么框1向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前面的而一个浮动框。

博百优向左浮动

当然,如果包含块太窄,无法容纳水平排列的三个浮动元素的话,那么其他浮动块向下移动,直到有足够空间的地方。

今天的博百优CSS就到这里吧,浮动定位模式其实也是我最常用的CSS定位方式,特别是博百优放Adsense广告的时候,一般都是用float,你呢?

3 comments

  1. 博百优 says:

    博主最好先讲讲相对定位和绝对定位,便于理解!呵呵,顺便问一下,我的站www.bobaiyou5.com可以做一个友情链接吗?

  2. 博百优 says:

    解决浏览器的兼容性比较重要