CSS中的浮动和定位

时间：2022-05-24 20:31:10

浮动和定位一直是让我焦头烂额，一直搞不懂，今天就来消除下盲点……

在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性

标准流的默认特性

1、分行、块级元素，并且能够dispay转换。
2、块级元素（block）：默认独占一行，不能并列显示，能够设置宽、高，宽度为父盒子的100%。例如：div、p、标题元素（h1-h6）、列表元素（ul li、dl dt dd）
3、行内元素（inline）：默认并排显示，不能设置宽、高，宽度为内容的宽度。例如：span、a、b、i
4、margin-bottom 和margin-top 塌陷，以最大值为准。

脱标的元素的特性

1、只要是脱离了标准流，元素都是不区分行、块的，体现在任何元素都可以设置宽、高；都有了收缩的性质，就是不设置宽度，就自动缩减为里面内容的宽度。
2、浮动的元素有贴边的性质，绝对定位的元素可以*定位。

浮动

float
值：left | right | none | inherit
初始值：none
应用于：所有元素
继承性：无
计算值：根据指定确定

浮动元素：

1.以某种方式从文档的正常流中删除，不过还是会影响布局。
2.浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
3.由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
4.浮动元素周围的外边距不会合并：如果其他元素与一具有外边距的浮动图像相邻（这表示水平相邻和垂直相邻），而且这些元素也有外边距，那么这些外边距不会与图像的外边距合并
5.浮动元素会生成一个块级框，而无论这个元素是什么

浮动的详情内幕

  • 浮动元素的规则

    简要用自己的话概括一下：
    1.浮动元素不能超过其包含块的内边界
    2.浮动元素彼此之间不会覆盖或重叠
    3.浮动元素的顶端不能比之前所有的浮动元素或者块级元素更高
    4.浮动元素不能超出其包含元素的边界，除非它太宽，本身都无法放下。这能防止出现以下情况，即多个浮动元素出现在一个水平线上，远远超出其包含块的边界。如果浮动元素出现在另一个浮动元素的旁边，而因此可能导致超出包含块的话，实际上这个浮动元素会向下浮动到之前浮动元素下面的某一点

可以参照下图更好的理解浮动规则~

CSS中的浮动和定位

  • 浮动元素的实用行为

    Q：浮动元素比其父元素高时会有什么结果？
    A：浮动元素会超过父元素的底端。 浮动规则只是处理了浮动元素的和其父元素的左、右和上边界，而没有涉及下边界，这个遗漏是故意的。实际上，有些浏览器不能正确地做到这一点。相反，它们会增加父元素的高度，使浮动元素能够包含在父元素中，即使这会导致父元素中出现大量多余的空白。
    S（solution）：CSS2.1澄清了浮动元素行为的一个方面：浮动元素会延伸，从而包含其所有后代浮动元素（CSS先前版本并没有明确指明发生的情况）。所以，通过将其父元素设置为浮动元素，就可以把浮动元素包含在其父元素内。
    Q：浮动元素可以超过父元素吗？
    A：当然是可以，只需要将浮动元素的外边距设置为负值即可，虽然这看上去与先前的规则相矛盾，不过其实并不矛盾。
    Q：如果一个浮动元素与正常流中的内容发生重叠会怎么样呢？
    A：CSS2.1明确以下规则：
    ——1.行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素”之上“显示
    ——2.块框与一个浮动元素重叠时，其边框和背景在该浮动元素”之下“显示，则内容在浮动元素”之上“显示
    这里所述的重叠行为与源文档中的顺序无关。元素在浮动元素之前还是之后出现并不重要；无论有怎样的顺序，都会有同样的行为

清除

clear
值：left | right | both | none | inherit
初始值：none
应用于：块级元素
继承性：无
计算值：根据指定确定
——含义：指定了clear的元素将清除左边或者右边或者全部的浮动元素。CSS2.1中引入了一个清除区域，指在元素上外边距之上增加的额外间距，不允许浮动元素进入这个范围。这意味着元素设置clear属性时，它的外边距并不改变。之所以向下移是这个清除区域造成的。

定位

利用定位，可以准确地定义元素框相对于其正常位置应该出现在哪里，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
position
值：static | relative | absolute | fixed | inherit
初始值：static
应用于：所有元素
继承性：无
计算值：根据指定确定

position值 含义
static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素会创建一个或多个行框，置于其父元素中
relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留
absolute 元素框从文档流中完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框
fixed 元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身


包含块——定位上下文
对于浮动元素，其包含块为最近的块级祖先元素
对于定位，规则就复杂多了……

  • ”根元素“的包含块即初始包含块，在HTML中，根元素就是html元素，不过有些浏览器会使用body作为根元素。在大多数浏览器中，初始包含块是一个视窗大小的矩形
  • 非根元素，position值为relative或者static，包含块则由最近的块级框、表单元格或行内块祖先框的内容边界构成
  • 非根元素，position值为absolute，包含块设置为最近的position值不是static的祖先元素（可以是任何类型，如果没有祖先，元素的包含块定义为初始包含块）。

偏移属性：
top、right、bottom、left
值：长度 | 百分数 | auto | inherit
初始值：auto
应用于：定位元素（也就是position值不是static的元素）
继承性：无
百分数：对于top和bottom，相对于包含块的高度；对于right和left，相对于包含块的宽度

今天先总结到这儿，未完待续……
盼着明天汇报结束可以回家看看~
人嘛，还是需要有点理想的~
标签：

相关文章