解析什么是绝对定位，相对定位与浮动

wawor4827 发布于2019-04-23 13:18 / 2397人阅读

摘要：注意，绝对定位使元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。相对定位相对定位，元素相对于它自己原来的位置进行移动。

在理解定位之前，先说一个概念，文档普通流，就是元素标签正常在HTML里的顺序，块级元素从上至下排列，行内元素从左到右排列。

绝对定位

绝对定位：absolute，元素相对于离它最近的已定位祖先元素进行移动，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（一般是HTML元素，也可能是画布，这是由用户的代理决定的）。注意，绝对定位使元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

如下图是正常放置的三个div，

如果将div2设置为绝对定位，会发现它会相对于HTML定位，因为没有已经定位的祖先元素，且原来的位置被div3补上了。

相对定位

相对定位：relative，元素相对于它自己原来的位置进行移动。注意，相对定位使元素仍然占据原来的位置。

如下图，如果将div2设置为相对定位，它会相对自己原来的位置移动，且会发现它原来的位置仍然占据着

浮动

浮动：float，浮动的元素可以向左或向右移动，直到它的外边缘碰到包含的元素边框或另一个浮动元素的边框为止。注意，浮动的元素不在文档的普通流中，所以文档的普通流的其他元素表现得就像浮动元素不存在一样。

如下图，将第二个div设置为float:right，它会跑到文档的右边

如果将div2设置为float:left，它会到文档的左边，也就是位置不变，并且脱离文档流，div3补上来，但我们会发现文字还是原处，这就是浮动和绝对定位的区别了。浮动会以某种方式将浮动元素从文档的正常流中删除，并把元素向左或向右浮动，该元素还是会影响布局，如果将div2浮动，div3确实占据了div2的位置，所以说浮动元素脱离了文档流，但div3中的文字没跟上来，这是为了避免div2将div3里的文字覆盖了，这就是浮动的目的，所以说浮动元素影响了布局；而绝对定位是将元素彻底从文档流删除，该元素再也不会影响其他元素的布局了，如果对div2绝对定位的，div3包括文字都会补上来被div2覆盖。

由于浮动会使元素脱离正常的文档流，所以无法撑开父级元素（父级元素没设置高度），导致父级元素在视觉上没包围浮动元素（高度塌陷），所以我们要清除浮动，通常是两类，一是利用clear属性，二是触发浮动元素的父元素的BFC（块级格式化上下文）

看下面例子，外层div没有被撑开

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标划过更改图片路径title>
head>
<body>
    <div id="wrapper" style="border:1px solid red;">
        <div style="float:left;width:50px;height:50px;background:black;">div>
    div>
body>
html>

解决办法如下：

1.给父级元素设置高度，但一般写页面高度都是不固定的。
#wrapper{
    height:100px;
}
2.给父级元素设置overflow:hidden或overflow:auto,zoom:1是为了浏览器的兼容性（IE大家都懂的），这种方法要注意溢出的元素。
#wrapper{
    overflow:hidden;
    zoom:1;
}
3.给父级设置浮动，这种方法适用于本来父级就需要浮动的，如果父级不需要浮动，影响布局，还是没解决根本问题。
#wrapper{
    float:left;
}
4.在浮动元素后面加个空元素,clear:both，这种方法加了无用的html元素，代码不够简洁，后期维护不便
<div id="clear">div>
#clear{
    clear:both;
}
5.利用父级的伪元素:after,推荐使用，兼容性好，万能方法。
#wrapper:after{
        content: "";如果有内容就写，没有就空，
        display: block;或者display:inline-block;
        clear: both;
        这三项是必须条件，其他都是可选项，视情况而定
    }
#wrapper{
        zoom:1;兼容IE
    }

在网页主要布局时:after伪元素方法应该为常用清理浮动方式；在小模块如ul里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题）；如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用邻接元素清理之前的浮动。最后可以使用相对完美的:after伪元素方法清理浮动。

云服务器 GPU云服务器相对定位-绝对定位相对定位绝对定位浮动定位

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1707.html

容易忽略的七个CSS知识点

摘要：样式声明通过一个称为级联的过程来解释和决定。级联级联可能是中最容易被弄错的属性之一。因此很容易认为元素的视觉边界等于其宽度，但情况并非如此。如果你在日常工作中使用CSS，那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。你可能还没有意识到，但CSS的视觉效果通常是操纵隐藏属性的间接结...

chanthuang 2019-08-02 16:16 评论0 收藏0
容易忽略的七个CSS知识点

摘要：样式声明通过一个称为级联的过程来解释和决定。级联级联可能是中最容易被弄错的属性之一。因此很容易认为元素的视觉边界等于其宽度，但情况并非如此。如果你在日常工作中使用CSS，那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。你可能还没有意识到，但CSS的视觉效果通常是操纵隐藏属性的间接结...

elina 2019-08-29 18:47 评论0 收藏0
前端入门4-CSS属性样式表

摘要：正文属性样式表正文属性样式表了解了具体的各种工作原理使用方式选择器规则层叠算法等之后，那么该来学习的也就是都支持哪些属性样式表了。本篇文章已授权微信公众号 dasu_Android（大苏）独家发布声明本系列文章内容全部梳理自以下四个来源：《HTML5权威指南》《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白，入...

hss01248 2019-04-23 13:14 评论0 收藏0
css基础

摘要：在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素，相对于其正常位置进行定位。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。 CSS display: none; 与 visibility: hidden; 的区别联系：它们都能让元素不可见区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；vi...

JinB 2019-08-30 14:21 评论0 收藏0
前端面试题 -- HTML+CSS

摘要：内核原为，现为内核，等。但盒子的大小由这几部分决定是一个属性，与盒子模型有着密切联系。前言貌似又到了一年一度跑路跳槽的时刻，由于个人的一些原因最近也参加了很多面试，发现有很多基础性的东西掌握程度还是不够，故此想总结一下最近面试遇到的问题以及个人认为比较重要的东西，留给自己消化，也分享给有需要的小伙伴 GitHub完整版面试题，欢迎小伙伴们star关注如果文章中有出现纰漏、错误之处...

shiina 2019-08-30 15:56 评论0 收藏0