BFC的理解

最新推荐文章于 2024-10-08 17:48:41 发布

weixin_51053942

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量48

点赞数 1

文章标签：前端 html css vue.js

本文链接：https://blog.csdn.net/weixin_51053942/article/details/129744656

版权

1、BFC是一个独立的空间，里面子元素的渲染不影响外面的布局

BFC的作用

1、解决margin塌陷

2、清除浮动

代码如下：给两个盒子设置margin:50px,发现margin塌陷

<template>
  <div>
    <div class="title_1">Post</div>
    <div class="title_2">get</div>
  </div>
</template>

<script>
export default {
  mounted() {
 
  },
  methods: {
  }
}
  
</script>

<style>
  .title_1 {
    width: 200px;
    height: 200px;
    border: 1px solid fuchsia;
    background-color: pink;
    margin: 50px;
  }
  .title_2 {
    width: 200px;
    height: 200px;
    border: 1px solid fuchsia;
    background-color: rgb(44, 199, 83);
    margin: 50px;
  }
</style>

解决margin塌陷方法：将其中的盒子加个大盒子包裹，给大盒子设置overflow:hidden

</div>

清除浮动

<template>
  <div>
    <div class="box" >
       <div class="title_1">Post</div>
  
    <div class="title_2">get</div>
      </div>
 
   
  </div>
</template>

<script>
export default {
  mounted() {
 
  },
  methods: {
  }
}
  
</script>

<style>
  .title_1 {
    width: 200px;
    height: 200px;
    border: 1px solid fuchsia;
    background-color: pink;
    float: left;
    margin: 50px;
  }
  .title_2 {
    width: 200px;
    height: 200px;
    border: 1px solid fuchsia;
    background-color: rgb(44, 199, 83);
    margin: 50px;
    float: right;
  }
  .box{
    background-color: rgb(209, 95, 161);
    overflow: hidden;  //给大盒子触发bfc
  }
</style>

如何触发BFC

overflow:hidden

display:inline-block/table-cell/flex

position:absolute/fixed