什么是BFC?

1、BFC：又叫块级格式化上下文（block formatting context），就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

2、BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。

3、如何触发BFC：

float的值为非none

overflow的值非visible

display的值为：inline-block、table、table-cell 等等

position的值为：absolute、fixed

高度塌陷：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>BFC</title><style>* {margin: 0;padding: 0;}ul {list-style: none;border: 10px solid #ccc;}ul li {float: left;margin: 10px;width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><ul><li>111</li><li>222</li><li>333</li></ul><p>这是P元素</p>
</body>
</html>

可以通过触发BFC解决问题：overflow: hidden;或者position: absolute;或者float: left;

一般是用 overflow: hidden;

* {margin: 0;padding: 0;}ul {list-style: none;border: 10px solid #ccc;overflow: hidden;}ul li {float: left;margin: 10px;width: 100px;height: 100px;background-color: pink;}