position与清除浮动

最新推荐文章于 2022-08-01 00:19:33 发布

原创最新推荐文章于 2022-08-01 00:19:33 发布 · 4.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#positon #清除浮动

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文深入解析了CSS中relative与absolute定位的区别，relative定位相对于其正常位置进行偏移，而absolute定位则相对于最近的非static定位祖先元素定位。此外，文章还探讨了四种常用的清除浮动方法，包括设置父元素高度、使用负margin、设置overflow为hidden以及利用伪元素after。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于absolute与relative的理解

relative（相对定位）

relative是相对于它在普通流来定位的。例如：#demo{position:relative;top:-50px;},这时**#demo**会在相对于它原来的位置上移50px。它不会脱离文档流。

absolute（绝对定位）

absolute是相对于它最近一级的，定位不是static的父元素来定位的，。以left，right，top，bottom来设置移动。它是会脱离文档流的。

关于清除浮动的方法

1.给浮动的元素的父级元素设置宽高。
2. 使用负margin。
3. 给浮动的元素的父级元素设置overflow:hidden;
4. 给浮动元素的父级元素添加伪元素after（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）,即在元素末尾添加一个内容为空并带有 clear: both 属性的元素实现的。例：
在这里插入图片描述

对于hover的理解

它是在它设置的这个元素里面定义样式，此元素外无法定义。

                                                                                                     2018.11.5