BFC/清除浮动的最佳实践

Crystal328
36 阅读2分钟

1. BFC

1.1理解

  • BFC （Box Formatting Context ，块级格式上下文）是页面上的一个隔离的独立容器
  • 容器里的子元素不会影响到外面的元素，反之亦然

如：一个盒子不设置 height，当内容子元素都浮动时，无法撑起自身

原因是：这个盒子没有形成 BFC

1.2 创建 BFC

  • 方法 1：float 的值不是 none
    • 该方法可以实现效果，但没有意义，不可能随意给盒子设置浮动
  • 方法 2：position 的值不是 static 或者 relative
    • 该方法可以实现效果，但不靠谱
  • 方法 3：display 的值是 inline-block、flex 或 inline-flex
    • 该方法可以实现效果，但，没有意义，可能随便改变盒子的为行内块，获取其他的
  • 方法 4：overflow：hidden;
    • 该方法可以实现效果，但是，不能满足所有的场景

1.3 其他作用

  • BFC 可以取消盒子 margin 塌陷
  • BFC 可以阻止元素被浮动元素覆盖

2. 清除浮动的最佳实践

为需要清除浮动的添加.clearfix

  /* 
      添加伪元素
      ::after 匹配选中的元素的最后一个子元素
    */
  .clearfix::after {
    content: "";
    clear: both;
    /* 转为块级元素 */
    display: block;
  }
  
  
  ————————————————————————————————————————————————————————————————————————

  <div class="clearfix">
    <p></p>
    <p></p>
  </div>

3. 清除浮动的方法（清除浮动：浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响）

3.1 overflow: hidden;

  • 让内部有浮动的父盒子形成 BFC，它就能关闭住内部的浮动。
  • 此时，最好的方法就是 overflow: hidden; 属性
<style>
  * {
    margin: 0;
    padding: 0;
  }

  div {
    /* 
        清除浮动方法1：
        让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动
        此时，最好的方法就是 overflow: hidden; 属性
      */
    overflow: hidden;
    margin-bottom: 10px;
  }

  p {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-right: 10px;
    float: left;
  }
</style>

<body>
  <div>
    <p></p>
    <p></p>
  </div>

  <div>
    <p></p>
    <p></p>
  </div>
</body>

3.2 clear: both;

  • 给后面的父盒子设置 clear: both; 属性
  • clear 表示清除浮动对自己的影响，both 表示左右浮动都清除

3.3 如上最佳实践

3.4 隔墙" 隔一个携带 clear: both;

在两个父盒子之间 "隔墙" 隔一个携带 clear: both;的盒子

<style>
 * {
   margin: 0;
   padding: 0;
 }

 div {
   border: 2px solid red;
 }

 p {
   width: 100px;
   height: 100px;
   background-color: orange;
   margin-right: 10px;
   float: left;
 }

 /* 
     清除浮动方法4：
     在两个父盒子之间 "隔墙" 隔一个携带 `clear: both;`的盒子
   */
 .cl {
   clear: both;
 }

 .h20 {
   height: 20px;
 }
</style>

<body>
 <div>
   <p></p>
   <p></p>
 </div>

 <!-- 在两个父盒子之间 "隔墙" 隔一个携带 `clear: both;`的盒子 -->
 <div class="cl h20"></div>

 <div>
   <p></p>
   <p></p>
 </div>
</body>
avatar
文章
阅读
粉丝