你了解哪些布局方式？两栏布局的实现、三栏布局的实现

你了解哪些布局方式？

1、两栏布局的实现—左固定右自适应

1-1方式一：利用float 或 overflow: hidden;

<div class="wrap">
      <div class="left">left</div>
      <div class="right">right</div>
</div>

.left {
   
        width: 200px;
        height: 100px
        background-color: pink;
        float: left;
     }
.right {
   
        height: 100px;
        background-color: blue;
        margin-left: 200px;  // 也可以用 overflow: hidden;
     }

注意： 当overflow的取值不是默认值的时候，就会创建BFC（块级格式化上下文，让元素成为隔离独立的容器，且容器内的子元素不会影响到外面的布局），从而起到一些独特的作用。
BFC的作用：

• 消除浮动，自动高度会计算浮动元素。
• 它的边框盒不会与浮动元素重叠。=>上述例子正是说明此作用
• 不会和它的子元素进行外边距合并。

详细的请点击跳转至BFC（块级格式化上下文）及display相关知识

1-2方式二：利用弹性盒子display: flex;

<div class="wrap">
      <div class="left">left</div>
      <div class="right">right</div>
</div>

.wrap {
   display: flex;}

.left {
   
        width: 200px;
        height: 100px;
        background-color: pink;
      }

.right {
   
        height: 100px;
        background-color: blue;
        flex: 1;
       }

1-3方式三：利用 margin负值

<div class="wrap">
      <div class="left">left</div>