CSS 浮动 float 小结

时间 2021-04-05

标签 css html html5 git github 浏览器布局 spa 设计 code 栏目 CSS 繁體版

原文原文链接

引子

在维护一些项目的时候，发现很多地方用 float 来进行布局，知道这个属性的做用效果，也知道怎么解决相关的问题，但就是不能进一步说出一个因此然来，就整理一下了。css

约定

这里是为了理解 float 相关的问题和解决方法，不去比较它们的优劣和兼容性，要相信将来是愈来愈美好的。基本的 html 结构以下：html

<div class="float-parent">
  <div class="float-ele fl"></div>
</div>

如下所讲示例页面：CSS浮动float相关初解示例html5

手机端浏览git

浮动的用途

浮动设计的初衷，是为了实现文本环绕效果。在一些教程里面，关于浮动的介绍没有强调这个，而是讲如何利用这个属性的做用，去实现一些所谓“有趣”的效果。虽然拓展了思路，但感受并无用的合适。github

浮动的介绍

W3C 文档里面说的很简洁：这个属性指定一个盒子浮动到左边、右边仍是不浮动。下面是摘取过来的基本特性。浏览器

Value: left | right | none | inherit
Initial: none
Applies to: all,but see 9.7
Inherited: no

下面就是相关说明和一些注意项。布局

重要的认知

浮动使元素从正常的文档流中移除，脱离了正常的文档流。而后向左或者向右平移，一直移动直到碰到了所处的容器的边界，或者碰到另一个浮动的元素。spa

值的做用

left ：元素会产生一个块级盒子向左浮动，正常的文档流会从这个盒子的右边和顶部开始。
right ：跟 left 属性值相似，只是元素产生的块级盒子向右浮动，正常的文档流会从这个盒子的左边和顶部开始。
none ：这个盒子不浮动。

display, position 和 float 之间的关系

屡次看到有人把这些属性写在一块儿，感受是在用试错的心理写 CSS 。如下状况示例页面：display、position 和 float 之间的关系示例。精力有限，规则应用下只试了部分取值状况。设计

这三个属性影响盒子产生和布局，它们相互影响有如下的顺序规则判断：code

若是 display 的属性值为 none ，那么 position 和 float 属性不会应用。这种状况不会产生盒子。
不然，若是 position 的指定值为 absolute 或 fixed ，这个盒子会是绝对定位，float 的计算值会取 none ，display 的取值规则按照下面的表格所示。这个盒子的位置取决于 top ，right ，bottom ，left 属性和这个盒子的包含块。
不然，若是 float 指定了 none 以外的值，这个盒子就会浮动，而且 display 取值规则按照下面的表格所示。
不然，若是这个元素是根元素，display 取值规则按照下面的表格所示。但在CSS2.2 有一种状况例外，指定为 list-item 的值变成计算值为 block 或 list-item 时，它的值未定义。
不然，剩下的 display 属性值按照指定的值应用。

指定的值	计算值
inline-table	table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
others	same as specified

由以上的规则可知，将这些属性写一块儿，有些时候并不会起做用。对于不熟悉的人反而会形成没必要要的困惑。

浮动的约束规则

约束的规则有很多，但实际中碰到的状况，并无那么多，以为要关注了解的点有 3 个：

浮动元素的包含块，是其最近的块级父元素；
包含块对于浮动元素的边界是指内容区的边界；
多个浮动元素之间的相互影响。

相关详细介绍见这里。若是以后实际中碰到相关状况，需在此进行补充。

浮动的问题

这个就是众所周知的父元素高度坍塌问题，因为脱离了文档流，这个是能够想象到的。为了解决这个问题，出现了 2 种说法：清除浮动和闭合浮动。看了这篇文章，以为说的颇有道理，咱们是为了解决高度坍塌的问题，清除浮动只是其中的一种方法，叫闭合浮动更为合适严谨。

闭合浮动的方法

方法1：利用属性 clear

样式属性 clear

结构变成以下

<div class="float-parent">
  <div class="float-ele fl"></div>
  <div class="clear-fix"></div>
</div>

新增的样式为：

.clear-fix {
  clear: both;
}

这个就是使用了 CSS 属性 clear 的特性，这个属性指出元素盒子的那边不会跟更早浮动盒子相邻，值为 both 的含义是：

在源文档里面，若是有比该元素比较早的浮动元素，须要让该元素的顶部 border 边界在，任何右浮动或左浮动元素底部外（margin）边界之下。

标签属性 clear

<div class="float-parent">
  <div class="float-ele fl"></div>
  <br clear="all" />
</div>

这个做用跟 CSS 形式同样，标签上的属性 clear 在 html5 中已经被废弃了，建议使用 CSS 属性 clear 。

方法2：利用伪元素

/* 添加到父元素上 */
.close-float-method2:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

这个就是用伪元素的方式替代额外的标签，主要属性仍是用到了 clear 。这个方法听说在跨浏览器时有问题，里面提到的是 ie7 ，就没有去尝试，具体见这里。

方法3：利用属性 overflow

/* 添加到父元素上 */
.close-float-method3 {
  overflow: hidden;
}

这个就要提到一个概念 Block formatting contexts（块级格式化上下文）。

浮动、绝对定位元素和块级包含块（好比 inline-blocks、table-cells、table-captions）都不是块级盒子，overflow 属性值取 visible 以外值的块级盒子为它们的内容创建新的块级格式化上下文。

在一个块级格式化上下文中，垂直方向上，盒子的放置是一个接一个，从一个包含块的顶部开始。垂直方向上两个相邻盒子的距离由 margin 属性决定。垂直边距在同一个块级格式化上下文中会产生重叠。

在一个块级格式化上下文中，每一个盒子的左外边界跟包含块的左边界相接触。这个对于浮动的展现一样是适用的，除非这个盒子创建了一个新的块级格式化上下文。

这里使用了 overflow 后创建了块级格式化上下文，包含了浮动元素，因此就闭合了浮动。

以上所讲相关示例页面：CSS浮动float相关初解示例