什么是BFC
BFC全称是Block Formatting Context，意思就是块级格式化上下文。你可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。
BFC的特性
-
BFC是一个块级元素，块级元素在垂直方向上依次排列。
-
BFC是一个独立的容器，内部元素不会影响容器外部的元素。
-
属于同一个BFC并且上下相邻的两个盒子，外边距margin会发生重叠，并且取最大外边距。
-
计算 BFC 的高度时，需要计算浮动元素的高度
-
BFC 区域不会与浮动的容器发生重叠!!!
-
每个元素的左 margin 值和容器的左 border 相接触
如何创建BFC?
给元素添加以下任意样式
- 具有overflow 且值不是 visible 的块元素，例如
overflow: hidden; display: flow-root;- 内联块 (元素具有
display: inline-block) - 绝对定位元素 (元素具有
position:absolute;或position:fixed;) - 浮动元素float不是none,例如
float:left; display: flex;display: inline-flex;
BFC有什么作用？
- 解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题
因为给子级元素添加浮动时，子元素脱离文档流，不在占据位置，无法撑起父盒子
- 解决前代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.continer
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
