【css面试题】BFC
参考文章1
参考文章2
什么是BFC
BFC全称是Block Formatting Context，意思就是块级格式化上下文。你可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。
BFC的特性
-
BFC是一个块级元素，块级元素在垂直方向上依次排列。
-
BFC是一个独立的容器，内部元素不会影响容器外部的元素。
-
属于同一个BFC的两个盒子，外边距margin会发生重叠，并且取最大外边距。
如何创建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{width: 900px;background: black;}.box1{height: 300px;width: 300px;background: red;float: left;}.box2{height: 300px;width: 300px;background: blue;float: left;}</style>
</head>
<body><div class="continer"><div class="box1"></div><div class="box2"></div></div>
</body>
</html>
- 解决后代码
.continer{width: 900px;background: black;overflow: hidden;}
- 解决子级元素设置外边距，但父级外边距塌陷的问题
- 解决前源码
<!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{width: 100px;height: 200px;background: green;}.box{margin-top: 20px;height: 50px;width: 50px;background: red;}</style>
</head>
<body><div class="continer"><div class="box"></div></div>
</body>
</html>
- 解决后
.continer{width: 100px;height: 200px;background: green;overflow: hidden; //!!!!!}
