overflow形成bfc模式格式化上下文在绝对定位，防止垂直边距重叠，防止float浮动元素覆盖，三栏布局左右固定宽度中间自适应中的运用

最新推荐文章于 2024-09-11 20:12:18 发布

天涯T_T浪人

最新推荐文章于 2024-09-11 20:12:18 发布

阅读量123

点赞数

分类专栏： css 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_44022586/article/details/117995861

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本质上是形成独立区域，不管其他元素什么布局互不影响
<!--
 * @Descripttion: 
 * @version: 
 * @Author: wangLei
 * @Date: 2021-06-17 09:38:01
 * @LastEditors: 
 * @LastEditTime: 2021-06-17 16:00:32
-->
<template>
<!--1. absolute脱离文档流 bfc模式独占一行-->
  <!-- <div class="wrapper">
     <div class="inner">
         <div class="content1">111</div>
     </div>
     <div class="content2"></div>
  </div> -->
  <div class="container">
      <!-- 2.bfc防止上下边距重叠   如果子元素给margin会自动撑开父元素，不给overflow会导致子元素的margin值直接穿透到父元素-->
    <!-- <div class="wrapper">
      <div class="box1">1</div>
    </div>
    <div class="box2">2</div> -->
    <!--3. bfc防止浮动重叠 -->
    <div class="content"></div>
    <div class="content"></div>
    <!--4. 三栏布局  中部自适应 -->
        <!-- <div class="column">1</div>
        <div class="column">2</div>
        <div class="column">3</div> -->
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  components: {},
  mounted() {},
  methods: {},
};
</script>

<style lang='scss' scoped>
// @function borderFn($bc) {
//   @return $bc;
// }
// @mixin border($bc, $height: 100px) {
//   background-color: $bc;
//   height: $height;
// }
// .wrapper {
//   @include border($bc: white, $height: 200px);
//   position: relative;
//   .inner{
//       overflow: hidden;
//     .content1 {
//     width: percentage(3/11);
//     height: 200px;
//     background-color: red;
//     float: right;
//   }
//   }
  
//   .content2 {
//     border: 1px solid green;
//     height: 500px;
//   }
// }

.container {
    //防止边距重叠
//   overflow: hidden;
//   width: 100px;
//   height: 100px;
//   background-color: red;
//   .wrapper {
//       overflow: hidden;
//     .box1 {
//       height: 20px;
//       margin: 10px 0;
//       background-color: green;
//     }
//   }

//   .box2 {
//     height: 20px;
//     margin: 20px 0;
//     background-color: green;
//   }
//防止浮动重叠
// .content:nth-of-type(1) {
//     width: 200px;
//     height: 100px;
//     background-color: red;
//     float: left;
// }
// .content:nth-of-type(2) {
//     overflow: hidden;
//     width: 200px;
//     height: 100px;
//     background-color: green;
// }
//  三栏布局  中部自适应 
// .column:nth-of-type(1),.column:nth-of-type(2){
//     width: 100px;
//     height: 100px;
//     float: left;
//     background-color: red;
// }
// .column:nth-of-type(2){
//     float: right;
// }
// .column:nth-of-type(3){
//     overflow: hidden;
//     height: 100px;
//     background-color: blue;
// }
}
</style>