花开陌上

估计大多数人误解了float的原本设计初衷，但是这里的“误用”是要加引号的，因为这是一种无心插柳的应用。即，用float做网页布局是很合情合理的，鼓励同志们继续使用。

这篇文章主要是为了解决一个实际遇到的问题：
左右两列布局，左侧宽度固定，右侧宽度自适应（或左中右三列布局，左侧和中间宽度固定，右侧宽度自适应），当页面宽度变化时，怎样使右侧元素中的内容始终在页面剩余宽度中居中显示，设置了text-align: center;之后，问题其实也就是怎样让右侧元素的宽度占据页面剩余所有宽度。

基础知识：元素float之后的变化

1.原本为inline或原本为block的元素，设置了float: left 或 float: right之后，会变得具有inline-block元素的特性，即：不独占一行，且可以设置宽和高。
2.与position:absolute;的脱离文档流不同的是：float的几个元素，它们在同一个文档流中。
3.float半脱离文档流：两个元素中的前一个设置了float:left;，对于后续元素的元素来说，前一个元素是脱离文档流的，也就是会占据元素的位置；对于后续元素的内容来说，前一个元素又是占据文档流的，也就是不会覆盖前一个元素的内容。如图所示：

方法一： float + calc()

html:

<div class="wrap">
    <div class="left">left</div>
    <div class="right"><p>我要居中</p><p>center</p></div>
</div>

css:

.wrap {
  width: 500px;
  background: yellow;
  overflow: hidden;
}
.left {
  float:left;
  width: 100px;
  background: blue;
}
.right{
  float:left;
  background: red;
  text-align:center;
}

如果我们仅仅这样写，那么效果会像下图这样：



可以看到右侧元素的宽度并不是页面剩余宽度。原因是：右侧元素float之后具有了行内块级元素的特性，即宽度为auto。所以无法占满剩余宽度。

这不是我们想要的结果，所以我们要自己设置右侧元素的宽度：

.right {
    width: calc(100% - 100px);
}

就符合我们的要求了：

方法二：position / float + margin-left

html部分同上:

<div class="wrap">
    <div class="left">left</div>
    <div class="right"><p>我要居中</p><p>center</p></div>
</div>

css:

.left {
  position:absolute;left: 0; /*或 float:left; */
  width: 100px;
  background: blue;
}
.right{
  margin-left: 100px;
  background: red;
  text-align:center;
}

原理是：左侧元素float: left或者设置position: absolute 之后脱离了文档流，右侧其实依然是一个霸道的独占一行的块级元素（block），设置margin-left为左侧元素宽度之后，看起来就像是两个元素在同一行，且右侧元素宽度自适应啦：

参考：imooc