CSS系列之浮动与定位

所有的元素都可以浮动

float:

• 值： left | right | none | inherit
• 初始值： none
• 所有元素

所谓的浮动来自于，当一个元素浮动时，其他内容会『环绕』该元素。会自动给浮动段落增加了外边距。

如果要浮动一个非替换元素，必须为该元素声明一个width，否则元素的宽度默认趋于0

关于浮动的详情

何为包含块， 浮动元素的包含块是其最近的块级祖先元素，此外，浮动元素会生成一个块级框，不管这个元素本身是什么。浮动的摆放规则和包含块有联系。

• 浮动元素的左右边界不能超过其包含块的左右内边界
• 浮动元素的左右边界一定在之前的浮动元素的左右边界，为了防止浮动元素彼此覆盖。
• 左浮动的元素的有外边界不会在其右边右浮动元素的左外边界的右边。为了防止浮动元素互相重叠。
• 后一个浮动元素不能不前一个浮动元素顶端高。
• 浮动元素不能超过其包含元素的边界。

负外边距

通过设置负外边距可以让浮动元素超过其父元素

重叠

CSS明确指出

• 行内框与一个浮动元素重叠时，其边框 背景 和内容都在该浮动元素上。
• 块框与一个浮动元素重叠，其边框和背景在该浮动元素之下显示，内容在浮动元素之上显示。

清除

clear : 值： left | right | both | none | inherit

​ 初始值： none

​ 应用于： 块级元素

定位

position: static | relative | absolute | fixed | inherit

​ 初始化 static

​ 应用于：所有元素

• static

  正常元素框，块级元素生成一个矩形框， 行内元素会创建一个或者多个行框 只与父元素中

• relative

  元素狂偏移某个元素，元素仍然保持其未定位前的形状，原来所占的空间仍然保留

• absolute

  元素框从文档流完全删除，并相对其包含框定位 ，包含框即可能是一个元素或者一个包含块，并且原来的空间会删除，定位后悔生成一个块级框

• fixed

  类似absolute ，只不是包含框是可见body

包含块

• 根元素的包含块由用户代理建立， 通常根元素就是html ，有些使用Body
• 非根元素，如果Position是relative static，包含块则由最近的块级框 表单元格 行内块祖先的内容边界构成
• 非根元素，如果Position是absolute 包含框则是最近的position不是static的父元素

宽度和高度

如果已经确定了元素定位，接下来可能希望申明元素的宽高

• min-width min-height
• max-width max-height

overflow : 值 ： visible | hidde | scroll | auto

​ 初始值 ：visible

​ 应用于： 块级元素和替换元素

visibility: visible | hidden | collapse | inherit

​ 初始值： visible

​ 应用： 所有元素

z-index <integer> | auto | inherit

​ 初始化： auto

​ 应用于： 定位元素