关于能够触发BFC特性的属性，以及它们各自带来的额外副作用

2024-01-11 16:50:52

今天整理了一下各种能够触发BFC的属性，它们各自带来的副作用，如下html代码，读者可自行在浏览器中调试查看效果：

相关解释在注释中

<!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>cnblog:kiss雪夜</title>
  <style>
    .outer {
      background-color: #f0f3f9;
      /* border不会触发BFC，但能够解决塌陷问题，它的副作用是多了border */
      /* border: 1px solid #ccc; */

      /* 下面4个属性能够通过触发BFC解决塌陷问题 */

      /* overflow: hidden;的副作用是可能会裁切掉我们想保留的元素 */
      /* overflow: hidden; */

      /* display: inline-block;的副作用是元素不再独占一行 */
      /* display: inline-block; */

      /* position: absolute;的副作用是变成绝对定位，脱离文档流不再占空间 */
      /* position: absolute; */

      /* display: flow-root;无副作用，但是目前仍然有浏览器兼容性问题 */
      /* display: flow-root; */
    }
    .outer p {
      outline: solid deepskyblue;
      margin: 2em;
    }
  </style>
</head>
<body>
  <div class="outer">
    <p>margin: 2em;</p>
  </div>
  <div class="outer">
    <p>margin: 2em;</p>
  </div>
</body>
</html>