Css中position、float和clear整理

程序员文章站 2022-04-25 19:30:34

...

Position:

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

块级元素水平方向的auto，块级元素的margin、border、padding以及content宽度之和等于父元素width。使用auto属性在父元素宽度变化的时候，该元素的宽度也会随之变化。

当该元素被设为浮动时，该元素的width就变成了内容的宽度了，由内容撑开，也就是所谓的有了包裹性。overflow | position:absolute | float:left/right都可以产生包裹性，替换元素也同样具有包裹性。

在具有包裹性的元素上想利用width : auto；来让元素宽度自适应浏览器宽是不行的。

元素浮动后，父元素会塌陷此时可以使用clear来清除浮动，让父元素就会包含它中间的浮动元素了

参考：CSS浮动

CSS clear属性指定：一个元素是紧挨着前面的浮动元素，还是必须移动到它们的下面（浮动被清除）。
clear属性既可以用于浮动元素，也可以用于非浮动元素。

当应用于非浮动块时，它将元素的边框边界移动到所有相关浮动元素外边界的下方。这个行为作用时会导致外边距折叠不起作用。

当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。

要被清除的相关浮动元素指在相同块级格式化上下文中的前置浮动。

注释:如果你想要一个元素将所有浮动元素包含在内，你既可以将这个容器设置为浮动，又可以通过 ::after 伪元素设置clear属性作为替代。

#container:after {
 content: "";
 display: block;
 clear: both;
}

clear的方式有2种，一种是使用伪类，另外一种是使用一个clear的元素，这样外面的元素就会包含它中间的浮动元素了。

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。