标签 float 下的文章

估计大多数人误解了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 + 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

css3教程：float

作者: admin

时间: 2017-08-15

分类: CSS3

2 条评论

对于所有的web前端开发人员，float是或者曾经一度是你最熟悉的陌生人——你离不开它，却整天承受着它所带给你的各种痛苦，你以为它很简单就那么一点知识，但却驾驭不了它各种奇怪的现象。
这就是我们又爱又恨的——float。所以，系统的学一学float是非常非常有必要的。视频学习可参考张鑫旭的《CSS深入理解之float浮动》，讲的很好很透彻。

重新认识float

1 误解和“误用”

这里说的“误用”并不是真正的误用，而是误打误撞使用之后，带来了真正的效果。
绝大多数人用float都是为了——横向排版或者多列布局。这样的使用是正确的，大部分人都这样使用，bootstrap的栅格系统也是使用了float来实现的，并且在css3被普及之前，多列布局的最佳解决方案也是使用float——要不然你就用table，或display:table-cell。
但是，这样使用确实是对float的一种误解和“误用”，因为float被设计出来的初衷是用于——文字环绕效果。即，一个图片一段文字，图片float:left之后，文字会环绕图片。
css3教程：float
但是，当时的多列布局和横向排版主要是依靠table实现，后来人们见见的发现，使用table将导致代码量大、混乱、不利于SEO，然后发现float+div是一个很不错的排版解决方案，于是乎——过去几年“css+div”页面排版一直是一个热门话题，也是各种高大上的面试题必考的一项。

如果你只知道float是用来排版，却不知道float的许多特性，就会导致你在使用float时遇到许多问题。不信请看下文。

2 破坏性

首先大家来看两个demo，如下图。第一个demo是一个简单不过的例子，显示效果也很正常。第二个demo，唯一的区别就在于加了float:left，上层的

却出现了“坍塌”现象。
css3教程：float

这就是float的“破坏性”——float破坏了父标签的原本结构，使得父标签出现了坍塌现象。导致这一现象的最根本原因在于：被设置了float的元素会脱离文档流。
“脱离文档流”可以理解为子元素与父元素间的DOM结构被破坏，父子关系解除。
但是，永远都不要忘记float被设计的初衷——实现文字环绕效果。当div中有文字时，文字还是会环绕在img周围的，“坍塌”现象消失了。如下图：
css3教程：float

那么，float为什么会被设计成具有破坏性，为什么会脱离文档流？这一点非常重要！其实原因非常简单——为了要实现文字的环绕效果！
如果float不让父元素坍塌：
css3教程：float

坍塌并脱离文档流后：
css3教程：float

3 包裹性

css3教程：float

如上图，普通的div如果没有设置宽度，它会撑满整个屏幕。而如果给div增加float:left之后，它突然变得紧凑了，宽度发生了变化，把内容“Phone”包裹了——这就是包裹性。div设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。
注意，此时div虽然体现了包裹性，但是它的display样式是没有变化的，还是block。
float为什么要具有包裹性？其实答案还得从float的设计初衷来寻找，float是被设计用于实现文字环绕效果的。文字环绕图片比较好理解，但是如果想要让文字环绕一个div呢？此时div不被“包裹”起来，那么如何去实现环绕效果？

4 清除空格

css3教程：float
上图中。第一个例子，正常的img中间是会有空格的，因为多个标签会有换行，而浏览器识别换行为空格，这也是很正常的。第二个例子中，img增加了float:left的样式，这就使得img之间没有了空格，四个img紧紧挨着。
“清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了，那么它身边的什么换行、空格就都和它没关系的，它就尽量的往一边去靠拢，能靠多近就靠多近，这就是清空格的本质。