搜索:
首页 >> 网页设计 >> CSS/HTML >> 为什么定位会被float和clear影响!

为什么定位会被float和clear影响!

2008-11-10 作者:林小志 来源:林小志blog 投递文章

因为一个需求,因为自己想多了一点东西,最后发现了一个问题,一个很奇怪的问题。这个问题我想还是我自己当初想法上的出路导致的吧,但想不通为什么会这样。就因为临时一个想法,把原本打算右浮动的块改成了绝对定位,结果出现了问题,绝对定位不见了。

想不明白,沉思……

突然想到,我好像对某一块加了 clear:both; 来清除浮动的,难道是这个引起的,抱着尝试的心态试了一下,果然如此!

兴奋一下,交差!

===============================

完成任务之后,有点空余时间,一直就是在想为什么会这样,于是乎整理了一下,在群里问,结果当时许未来同学告诉我一个东西,说定位跟clear的关系,当时想想很有可能,不过后来仔细一想不对,不是因为这个问题,因为许未来同学说的是相对定位,而我的是绝对定位。

不多说,给大家看看整理后的代码

 程序代码

* {margin:0;padding:0;}
#container {position:relative;width:970px;overflow:hidden;margin:0 auto;}
.intro{float:left;width:304px;height:455px;margin-right:12px;margin-bottom:12px;display:inline;border:1px solid #B6CAE3;}
.plan {position:absolute;top:0;right:0;width:204px;margin-bottom:12px;height:455px;border:1px solid #B6CAE3;background:#F00;}
.picList {clear:both;width:968px;height:300px;margin-bottom:12px;border:1px solid #B6CAE3;}

程序代码

<div id="container">
    <div class="intro">这个是浮动的块</div>
    <div class="plan">这个是定位的块</div>
    <div class="picList">这个是带有clear:both;清除浮动的块</div>
</div>

 HTML代码

[提示:你可先修改部分代码,再按运行]

解决的方法呢有以下几种,分别是
1、去掉 .picList 中的 clear:both;
2、<div class="plan">这个是定位的块</div> 在结构中,让这个块内容移到 <div class="picList">这个是带有clear:both;清除浮动的块</div> 下面,也就是让 .picList 中的 clear:both; 不对 .plan 起作用。
3、去除绝对定位前面的浮动,也就是 <div class="intro">这个是浮动的块</div> 的 float:left;

Tags:float  clear  浮动  定位  css 
相关文章
手机版 CSS/HTML Asp之家 Aspxhome.com
闽ICP备06017341号