4浮动与定位

Posted 2021-03-17 chd1994

一、浮动——float

??????????????float：left | right | none | inherit

1、特性

• 任何元素都可浮动，浮动后生成块级框（BFC）。
• 浮动元素会从正常流中删除
• 其他元素会环绕浮动元素
• margin不会合并
• 其包含块是最近的块级祖先元素
• 浮动元素之间不会重叠

• 空间不够，浮动元素会被挤到新行上

  2、行为

• 浮动元素高度超出父元素高度时，父元素无法包含它，会产生高度塌陷。
  解决方法：
  （1） clearfix：添加块级子元素，设置clear:both。
  （2）触发父元素BFC：
  • float: left、right
  • overflow:auto、scroll、hidden
  • display：table-cell、table-caption、inline-block
  • position:fixed、absolute

• 浮动元素与一般元素重叠情况（负margin设置）：行内框会在浮动元素之上显示；块级框内容显示在上，其他在下。

3、清除浮动

clear:left——元素左边不会出现浮动元素
clear:right——元素右边不会出现浮动元素
clear:both——元素两边不会出现浮动元素

二、定位——position

1、定位类型

static——正常文档流内
relative——相对定位。相对自身定位，原本占位空间保留。建立新的包含块（BFC）。
absolute——绝对定位。相对于包含块（最近的非static定位祖先元素）定位，从文档流完全删除，原本占位消失，生成块级框
fixed——固定定位，相对于视图框定位，从文档流完全删除。

2、属性

relative、absolute、fixed具有偏移属性top/bottom/right/left，百分比值相对于包含块的尺寸。相对于外边距边界偏移。

3、层叠顺序

static元素层叠顺序：行内元素 > 浮动元素 > 块级元素 > 背景（层叠上下文）
对于所有元素层叠顺序规则：后来居上，后面的元素覆盖前面的元素（默认）。不论其定位类型。
body——0

三、Block Formatting Context——格式化块级上下文（BFC）

1、作用

• BFC的子元素和外部相互不影响。（BFC元素不会发生margin重叠）
• 更适合自适应布局

2、触发情况

• html根元素
• 浮动元素
• overflow不是visible的元素。（auto、scroll、hidden）
• display：table-cell、table-caption、inline-block
• position是absolute或fixed