web页面与多页应用（布局之浮动）

Posted 2020-12-17 KIU的博客

1.使用浮动来设置二列布局
利用浮动和块级元素实现的左侧宽度固定，右侧自适应宽度的布局方式

<div class="left">left</div>
<div class="right">right</div>
/* css */
.left {
  float: left;
  width: 100px;
  background-color: red;
}
.right {
  margin-left: 100px;
  background-color: green;
}

2.使用浮动

著名的有“圣杯布局”和“双飞翼布局”，他们都是左侧，右侧宽度固定。中间自适应的三列布局。

圣杯布局：“圣杯布局”中每列都用了浮动，不同的是元素顺序并没有与布局顺序一致（先写中间列而不是左边列），同时左侧元素还借助了标准文档流的相对定位。元素顺序与我们直觉不一致的目的在于让浏览器优先解析和显示中间部分内容，但带来的问题就是左侧元素的偏移值无法很好的计算

　　　　左侧元素距离左边的偏移量 = 左侧元素宽度 + 中间元素宽度

　　左侧元素宽度是固定的，这里是200px，中间元素是撑满父容器内容区域的，是相对值100%，所以无法使用单纯地做外边距来实现，需要应用兼容性更好的解决方案——相对定位

<!-- html -->
<div class="container">
  <div class="center column">center</div>
  <div class="left column">left</div>
  <div class="right column">right</div>
</div>
/*css*/
.container .column {
  float: left;
  position: relative;
}
.container {
  padding-left: 200px;
  padding-right: 150px;
}
.left {
  width: 200px;     
  margin-left: -100%;  
  right: 200px; 
  background-color: red;
}
.center {
  width: 100%;
  background-color: yellow;
}
.right {
  width: 150px; 
  margin-right: -150px; 
  background-color: green;
}

 

　　“双飞翼布局”就是针对以上问题提出的，该布局不使用相对定位的方式来使左边的元素进行偏移，而是在中间的元素上加了一层父容器，并留出相应的边距让左右两边元素能顺利填充进来

<!--html-->
<div class="container">
  <div class="center-wrap column">
    <div class="center">center</div>
  </div>
  <div class="left column">left</div>
  <div class="right column">right</div>
</div>
/*css*/
.container {
  position: relative;
}
.column {
  float: left;
}
.center-wrap {
  width: 100%;
}
.center-wrap .center {
  margin-left: 200px;
  margin-right: 150px;
  background-color: yellow;
}
.left {
  width: 200px;
  margin-left: -100%;
  background-color: red;
}
.right {
  width: 150px;
  margin-left: -150px;
  background-color: green;
}