浮动的那些事

评论(7)

浮动一直都是痛,尤其是在做多栏式博客主题的时候。其实有时候事情很简单,当我们掌握了浮动,我们就控制了网页版面,但又很复杂,浮动不是那么容易就掌握了的,包括清除浮动,许许多多前端、html爱好者都沉迷 and 沉溺 于此!

因为非常喜欢点点轻博客的默认风格,简单、典雅 简直是朕的大爱,所以打算把它移植到 WordPress 上,最近两天一直在打样板,虽然不是科班,但学做 HTML + CSS 的静态网页已经不短时间了,所以仿起来也驾轻就熟,很快样式图片神马的都就备齐了,FireFox、Chrome、IE9、IE8显示正常。

myDianDian

myDianDian

不敢说对于浮动的理解已经透彻,但总有少少的经验需记录一下。

不卖关子了,直接说情况,当我们拥有两个div的时候

仅左浮动

如果只有右边的div float right 的时候 结果会是这样:

<div class="left-no-float" style="height:200px;width:200px;background-color:#f00f00;">class left-no-float</div>
<div class="right-float-right" style="height:200px;width:200px;background-color:#527BBD;float:right;">class right-float-right</div>

class left-no-float
class right-float-right

仅右浮动

如果只有 左边div float left 的话
右边的div会完全被左边浮动的div盖住只剩下字了。

<div class="left-float-left" style="height:200px;width:200px;background-color:#f00f00;float:left;">class left-float-left</div>
<div class="right-no-float" style="height:200px;width:200px;background-color:#527BBD;">class right-no-float</div>

class left-float-left
class right-no-float
这样看也许不够明白,
右边的div是找不到了吗?其实不然。
所以稍改一下代码,将右边的div高度、宽度各加100px(像素)

<div class="left-float-left" style="height:200px;width:200px;background-color:#f00f00;float:left;">class left-float-left</div>
<div class="right-no-float" style="height:300px;width:300px;background-color:#527BBD;">class right-no-float</div>

class left-float-left
class right-no-float

左右一起浮动

当然我们的最终目的是

<div class="left-float-left" style="height:200px;width:200px;background-color:#f00f00;float:left;">class left-float-left</div>
<div class="right-float-right" style="height:200px;width:200px;background-color:#527BBD;float:right;">class right-float-right</div>

class left-float-left
class right-float-right




转载请注明转自: 浮动的那些事

  1. 老板,你能告诉我你网站顶部浮动的菜单是怎么做的吗

  2. jquery 实现比较简单 现在上不了网,有空会总结一下
    你也可以直接拿我的用,js代码里有注释
    @wind

  3. xiang兄,go to top 的按钮如何实现呢?想把mg12主题的那个按钮改下。

  4. 很期待这款主题!

  5. @wind
    你是说的 “class right-no-float” 这个?
    第二例中的 left这个div ,float left 后被从普通文档流提出,所以就遮住第二个div了。
    想要明白就要把例子稍微改一下。

  6. 忽然明白,难道是有意这样浮动吗?

  7. xiang兄的这篇文字的部分超出了界限了,发生错位了。不知是我网络的问题还是啥的问题。写完睡觉了。