一、css中常规的定位方案
1.普通流
- 元素按照其在 HTML 中的先后位置至上而下布局
- 行内水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行
- 所有元素默认都是普通流定位
2.浮动
元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移
3.绝对定位
二、常规布局下的问题(不是bug)
1.外边距重叠
2.浮动的元素可以使父盒子高度塌陷
3.浮动元素 覆盖其他元素
4.父子盒子嵌套外盒子塌陷
三、BFC讲解
1.概念:
BFC(Block_formatting_context)块级格式化上下文
2.解释
BFC是一个独立的区域,有自己的渲染规则。使用了BFC相当于加了容器隔离,使BFC内部的元素与外部元素在布局上互不影响
通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。
3.特性
1.每个BFC区域只包含其子盒子,不包含其孙子盒子
2.每个BFC区域相互独立,互不影响
4.渲染规则
BFC
的区域不会与float
的元素区域重叠- 计算BFC的高度时,浮动子元素也参与计算
BFC
就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然- BFC的区域 会计算子盒子到父盒子margin-top的距离
5.BFC的作用(解决问题)
1.外边距重叠
2.浮动的元素可以使父盒子高度塌陷
3.浮动元素 覆盖其他元素
4.父子盒子嵌套外盒子塌陷
6.如何让一个常规盒子变成BFC盒子
只要元素满足下面任一条件即可触发 BFC 特性:
- html 根元素
- 浮动元素:float 除 none 以外的值
- 绝对定位元素:position (absolute、fixed)
- display 为 inline-block、table-cells、flex、flow-root
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
常用:overflow:hidden,display: flow-root因为他没有副作用
四、实操
1.使用BFC解决 外边距重叠
2.使用BFC解决 浮动的元素可以使父盒子高度塌陷
3.使用BFC解决 浮动元素 覆盖其他元素
4.使用BFC解决 父子盒子嵌套外盒子塌陷
五、总结
BFC是块级格式化上下文,可以形成一个独立的渲染区域。让BFC内部的盒子和外部的盒子实现隔离。它有自己的渲染规则,
BFC
的区域不会与float
的元素区域重叠- 计算BFC的高度时,浮动子元素也参与计算
BFC
就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然- BFC的区域 会计算子盒子到父盒子margin-top的距离
可以利用这些规则去解决这些问题:
1.外边距重叠
2.浮动的元素可以使父盒子高度塌陷
3.浮动元素 覆盖其他元素
4.父子盒子嵌套外盒子塌陷
如果想使用BFC的话,可以给盒子设置以下任意属性,让普通盒子变成BFC盒子
- 浮动元素:float 除 none 以外的值
- 绝对定位元素:position (absolute、fixed)
- display 为 inline-block、table-cells、flex、flow-root
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
常用:overflow:hidden,display: flow-root因为他没有副作用