2つのカラムレイアウトを実装する方法

html

    
left
    
right

1. float+margin-left

.main{
 border: 1px solid black;
  overflow: hidden;// 
}
.left{
  width: 200px;
  background: green;
  float: left;
  
}
.right{
  margin-left: 200px;
  background: red;
}

leftをfloat:leftに設定し、ドキュメントフローから離れます.rightはブロックレベルの要素であり、親要素の幅に適応するにつれてフローティング要素を「無視」します.margin-leftはleft要素の幅です.

2. absolute+margin-left

.main{
 border: 1px solid black;
  
}
.left{
  width: 200px;
  background: green;
  position: absolute;
}
.right{
  margin-left: 200px;
  background: red;
}

もう1つのブロックを一緒に並べる方法は、左側の箱にposition:absoluteの絶対位置決めを使用することです.これで、右側の箱も無視できます

3.フローティングと負のマージンの実現

html

    
    

        
right-inner
    
    
left

css

.main {
            border: 1px solid black;
        }

        .left {
            float: left;
            width: 200px;
            background: green;
            margin-left: -100%;
        }

        .right {
            float: left;
            width: 100%;
        }

        .right-inner {
            margin-left: 200px;
            background: yellow;
        }

左の幅を指定しなくてもいい(計算しなくてもいい)方法は、次のとおりです.

4. flex

.main{
 border: 1px solid black;
 display: flex;
}
.left{
  width: 100px;
  background: green;
}
.right{
  background: red;
  flex: 1;
}

右の箱flex:1を幅が自動的に伸縮することを意味します.

5. float+BFC

.main{
 border: 1px solid black;
overflow: auto;
}
.left{
  float: left;
  background: green;
  margin-right: 20px;
}
.right{
  background: red;
  overflow: hidden;
}

BFCをトリガした要素がフローティング要素に重ならないという特性のため、この場合、左側のフローティングボックスにmargin-rightを設定するだけで、2つのボックスの距離を実現できます.右側のボックスはblockレベルなので幅が適応できます
リンク
https://zhuqingguang.github.io/2017/08/16/adapting-two-layout/