详解定位以及布局冲突问题

来源：互联网发布：linux 的阿莫编辑：程序博客网时间：2024/06/09 17:49

不管是float浮动属性还是position都会涉及到脱离文档流导致网页布局发生改变。

如下代码：（为没有position,以及float脱离文档流操作的div盒子结构）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin:0px; padding:0px;}div{width:100px;height:100px;}#id1{background:red;}#id2{background:black;}#id3{background:green;}#id4{background:blue;width:150px;height:100px;}</style></head><body><div id = "id1"></div><div id = "id2"></div><div id = "id3"></div><div id = "id4"></div></body></html>

以上代码构成的布局：

这个是默认布局，没有个块级元素(block)都会在元素末尾增加一个换行符进行换行

#id3{background:green;position:absolute;}

我们给id = "id3"div 设置为absolute属性进行绝对定位，而他的相对定位是针对父亲元素不是position:static的一切进行绝对定位的。就是说只要一个元素的父类不是static属性的话，他的儿子如果设定成为position:absolute那么他的那个子元素便会相对于他进行绝对定位。

以上设置会得到这种效果

大家可以发现一个问题，id4竟然在原本属于id3的位置，而id3相当于是漂浮在了id4的上方，很奇妙，这就是position进行设置的影响，对于默认的position:static设置的元素而言他们是紧紧的嵌入文档流，他的位置设定后，是不会被其他的元素覆盖，非常严格，而当将position设置为absolute;这个被设置的元素会脱离文档流，在没有任何操作的情况下，他会一直漂浮在他没有设置position为absolute情况下的位置，除非，主动设置left,top,bottom,right对他进行绝对定位，否则他的位置保持不变。

然而当他飘出文档流时，他在文档流中的位置就被空了出来，那么如果下一个元素没有设置position为absolute;的话，这个元素便会占用前一个position设置为absolute的元素原本的位置，导致上述情况

#id2{background:black;float:left;}

接着我们设置代码为以上形式，我们会发现，网页布局变为了如图所示：

我们通过浏览器Google chrome调试可以发现，如下图：

我们发现问题了：这float好像有与position:absolute相似的作用，好像也飘出了文档流，没错，float属性就是用来设置浮动的，浮动浮动，自然是飘出了文档流进行浮动了，一个元素设置为浮动的时候，他在文档流中的位置也会空出来，那么久会导致如上图所示的效果。然而我们不由得思考，浮动还有其他功能吗？

其实float的主要功能是让一些元素呈现出行内元素相似的布局，他有两个属性设置一个为left,一个为right,left是左浮动，right是右浮动，顾名思义，左浮动便是靠着向左边。

如下，重新写一个ul无序列表：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">    *{margin:0px;padding:0px;}    ul li{width:100px;height:100px;color:white;}    ul li:nth-child(1){background:red;}    ul li:nth-child(2){background:black;}    ul li:nth-child(3){background:blue;}    </style></head><body>    <ul>        <li>1</li>        <li>2</li>        <li>3</li>    </ul></body></html>

这无序列表ul li布局是默认的向下，那么如果我要让他们都是在一行，并且之间没有空隙那么我们就可以设置浮动。

ul li{width:100px;height:100px;color:white;float:left;}

这就是效果，到了这里，我们再次用Google chrome浏览器调试的话，我们会发现一个问题，如下图：

诶！！！ul的高度怎么会是零，大家这时会想到，我们之前就已经说过，float是会漂浮一个元素使这个元素在文档流的位置空出来，那么他的父类如果没有设置高度的话，那么包含这个漂浮元素的父元素便会认为他的子元素的高度是为零的，所以得到ul的高度为零，那么我们有办法解决这个问题吗？，我们让一个父元素能够跟着子元素的高度变化，在子元素设置了float浮动属性的情况下，办法是有的，如下：

我们在子元素结束的时候加上一个div.clear那么效果便会变成如下：

诶，好神奇，竟然回来了，没错，这里的div.clear便是清除浮动，他会消除子元素对父元素浮动的影响，保证父元素可以检测到子元素的大小，从而正确显示，那么float可以通过这种方法来清除飘出文档流带来的影响，那么position:absolute是不是也可以这么做。

这个答案是肯定，也许有人就疑惑了，好像不可以吧，但是仔细一想就会明白，虽然position:absolute没有想float这个浮动属性clear来清除浮动，但是，我们可以设置一个父元素包裹着这个要设为position:absolute;的元素，这个父元素什么都不做，他用默认的position:static.那么即使这个元素漂浮起来了，但是他的位置依旧被父元素给占据着，那么不就相当于，以上clear的效果了吗！

此外这里再说一下position的其他两个属性（不包括static，这是浏览器默认的属性）：fixed,relative;

relative是相对定位，他的效果是这样的：

可以发现，这个relative不像absolute以及float属性，他虽然可以漂浮，但是他在文档流中的位置是没有被空出来的，而且，他通过left这些位置属性设定是相对于他在文档流中的位置进行定位的，如下

如上图，我们为有relative属性的元素进行定位，就会形成如下结果

相对于他在文档流中的位置进行定位

至于fixed属性就是更absolute基本一样了，唯一不同的是，他是相对于浏览器定位

上图的导航栏就是如此

导航栏设置为了fixed且top:0px,不管你怎么滚动页面，他离浏览器最上端的距离还是0px

当然他一样有漂浮属性，想absolute一样，会将文档流原来的位置给空出来。

最后送上我写的一个position:absolute的一个特效吧！

0 0