HTML与CSS手写-4.实现常用布局（三栏、圣杯、双飞翼、吸顶），可是说出多种方式并理解其优缺点

实现常用布局

两栏布局

三栏、圣杯、双飞翼

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）

圣杯布局 relative margin-left: -100%;

<style>

.container {

padding: 0px 100px;

min-width: 300px;

overflow: hidden;

}

.left {

float: left;

position: relative;

left: -100px;

margin-left: -100%;

width: 100px;

background-color: red;

}

.center {

float: left;

width: 100%;

background-color: green;

}

.right {

float: left;

position: relative;

left: 100px;

margin-left: -100px;

width: 100px;

background-color: blue;

}

</style>

</head>

<body>

<div class="center">center</div>

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

</div>

</body>

缺陷

某一列内容溢出时，三栏不是等高的进行登高布局解决
中间栏的最小宽度不能小于左右两栏的宽度，否则左右两栏会掉到下一行。（min-width解决）

双飞翼布局

margin-left:-100% margin-left:-100px 牛逼

<body>
  <div id="header"></div>
  <div id="container" class="column">
    <div id="center"></div>
  </div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
  <div id="footer"></div>
<body>

body {
  min-width: 500px;
}

#container {
  width: 100%;
}

.column {
  float: left;
}
        
#center {
  margin-left: 200px;
  margin-right: 150px;
}
        
#left {
  width: 200px; 
  margin-left: -100%;
}
        
#right {
  width: 150px; 
  margin-left: -150px;
}
        
#footer {
  clear: both;
}