CSS基础知识（定位、浮动）

12、浮动

特点：将当前元素脱离文档流 float: left 即左浮动 float: right 即右浮动

注：*父与子元素，设置子元素浮动不能超出父元素的范围

*多个元素均设置为浮动时，将自动排列(水平方向)

*兄弟元素，后一个元素设置为浮动，前一个元素不浮动，后一个元素的位置不能超过前一个元素的位置

*文字内容不会被浮动元素所覆盖，而是环绕在浮动元素的周围。

i 清除浮动 clear

none - 不清除 left - 清除左浮动 right - 清除右浮动 both - 清除两侧的浮动

i 高度塌陷

设置：父级元素- 未设置高度；子级元素- 设置高度，且浮动

结果: 父级的显示高度为 0

默认情况下，未设置宽高；默认宽度是当前页面整个宽度；高度是0或子元素高度的总和

u 解决方案

(1)为父元素设置高度(所有子元素高度的总和)

问题：人为为父级元素设置 height 属性；父级元素的 height 属性值，计算得来的

(2)将父和子元素同时设置为浮动

父元素未设置宽度和高度 结果: 父级的宽度和高度分别所有子元素的宽度和高度的总和

(3)clear属性 来清除浮动

l BFC块极格式化环境

全称：Block Formatting Context，是元素的隐含属性。

默认情况下BFC是关闭的，当元素开启BFC以后，将会具有如下特性：

*文档流中的元素不会被设置为浮动的元素所覆盖

*子元素的垂直方向的外边距不会传递给父元素

*元素可以包含浮动的子元素

² 开启 BFC

设置元素为 浮动（float）；或display 为 inline-block；或 绝对定位

将元素的overflow 设置为一个非visible的值（一般设置为 hidden）

在所有子元素的最后新增一个子元素，并设置 clear 属性值为 both

注: 开启 BFC会有一些副作用，需要选择一些副作用小的方式。

13、定位

Ø static 默认值 表示静态定位(没有开启定位)

Ø relative 表示相对定位，没有脱离文档流

相对于父级元素的定位：

相对定位后的位置，是相对于当前元素的原本位置进行计算

* 行内元素设置为相对定位时 - 依旧是内联元素的效果 Span

• Ø absolute 表示绝对定位 【脱离】文档流

开启绝对定位，（默认开启定位 - 不会改变当前元素显示的位置）

top、right、bottom、left依次设置距离上边、右边、下边、左边的值

定义父级与子级元素：

1. 只为子级元素设置绝对定位： 相对于<HTML页面>进行定位

2. 同时为父级和子级元素设置绝对定位：

父级元素相对于 <HTML页面> 进行定位； 子级元素相对于 <父级元素> 的进行定位

• fixed 表示固定定位 【脱离】文档流

效果：相对于 <HTML页面> 进行的定位

【注：行内元素设置为固定定位、绝对定位，呈现块极元素的效果】