合理使用float布局网页

Xiaomo

分类: 前端探索 503 0

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

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

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

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

合理使用float布局网页

合理使用float布局网页

方法一: 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布局网页

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

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

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

就符合我们的要求了:

合理使用float布局网页

方法二: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为左侧元素宽度之后,看起来就像是两个元素在同一行,且右侧元素宽度自适应啦:

合理使用float布局网页

参考:imooc

  • 2人 Love
  • 1人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
CSS3、float、布局网页

作者简介:Xiaomo

学无止境,生命不息,折腾不止!

共 0 条评论关于 “合理使用float布局网页”

Loading...