网络编程
位置：首页>> 网络编程>> 网页设计>> 为什么定位会被float和clear影响！

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

作者：林小志　来源：林小志blog　发布时间：2008-11-10 11:06:00　

标签：float,clear,浮动,定位,css

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

想不明白，沉思……

突然想到，我好像对某一块加了 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;

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com