CSS FLOAT 学习笔记

  • A+
所属分类:web前端

CSS的定位机制

  • 常规流(Normal-Flow)
  • 浮动(Float)
  • 绝对定位(Absoluted Position)

浮动的特性

  • 浮动框可以左右浮动,直至它的外边缘遇到包含框或者另一个浮动框的边缘
  • 浮动框脱离了文档的常规流。文档的常规流就会忽略浮动框的存在
  • 浮动框不会影响到块级框的布局,但会影响内联框的排列
  • 当浮动框高度超出包含框的时候,包含框不会自动伸缩来闭合浮动框。如果包含框内部不存在其他普通流元素,其高度为0。即所谓的高度塌陷现象

浮动的分类

  • 清除浮动: Clearing-Float,浮动元素的左右两边是否允许其他元素的存在
  • 闭合浮动: Enclosing-Float,浮动元素重新被包含进父元素(闭合浮动的目的在于使包含框表现出正常的高度)

清除(闭合)浮动的方法

1 clear清除法

1.1 添加空元素

我们先来看一个典型的浮动的例子

由于 .wrapper 的两个子元素 .float-left 和 .float-right 浮动,造成 .wrapper 的高度坍塌现象:

CSS FLOAT 学习笔记

我们可以在浮动元素末尾添加一个空元素来清除浮动:

效果图:

CSS FLOAT 学习笔记

优点:简单易用
缺点:增加了无意义的空标签,有违语义化,有违结构与表现相分离,不利于后期维护

1.2 使用br元素

我们也可以使用 br 元素,利用 br 元素的 clear = all | left | right | none 属性

效果图:

CSS FLOAT 学习笔记

如果在父元素外部使用 br 元素:

高度坍塌现象仍然存在:

CSS FLOAT 学习笔记

优点:比空元素方式语义稍强

缺点:同样增加了无意义的空元素,不利于后期维护

1.3 使用伪元素::after

NOTE: 由于 IE6-7 不支持 ::after,使用 zoom: 1; 触发 hasLayout

效果图:

CSS FLOAT 学习笔记

优点:结构和语义化都正确

缺点:复用方式不当会造成代码量增加

2 触发BFC

2.1 父元素 overflow: hidden | auto;

通过设置父元素 overflow 的值为 visible 以外的值,从而触发 BFC;在 IE6 中还需要触发 hasLayout,例如 zoom: 1;

效果图:

CSS FLOAT 学习笔记

优点:不存在结构和语义化问题

缺点:内容过多时,不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素

2.2 其他方式

我们也可以使用其他方式触发BFC,效果和使用 overflow 类似。在后面的关于 BFC 的介绍中,我们再详细阐述。

3 小结

通过对比,我们不难发现,其实清除(闭合)浮动的方法无非有两类:

  1. 清除浮动:通过在浮动元素的末尾添加一个空元素,设置 clear:both 属性来清除浮动。after 伪元素其实也是通过在元素的后面生成了一个空白内容的块级元素
  2. 闭合浮动:通过设置父元素的 overflow 等属性触发 BFC 来闭合浮动

BFC

BFC: Block Formatting Contexts (块级格式化上下文,CSS3 改称为 Flow Root)

BFC 是 Web 页面中盒模型布局的 CSS 渲染模式。它的定位体系属于常规文档流。通俗地讲:创建了 BFC 的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素,同时 BFC 仍然属于文档中的常规流。

BFC的触发条件

  • position: absolute | fixed;
  • display: table-caption | table-cell | inline-block | inline-flex | flex;
  • float: left | right;
  • visibility: hidden | scroll | auto;

BFC的特性

BFC的用途

1 父元素的高度值

默认的 web 布局

效果图:

CSS FLOAT 学习笔记

若子元素有外边距,父元素无外边距,则会发生子元素外边距越界现象

效果图:

CSS FLOAT 学习笔记

若父元素触发了BFC,则会生成一个独立的盒子包含子元素,包括子元素的外边距

效果图:

CSS FLOAT 学习笔记

2 防止外边距重叠

在上面,我们已经看到了子元素的外边距重叠现象。如何防止呢?我们必须牢记在心的是:毗邻的块盒的垂直外边距重叠只有当它们是在同一BFC时才会发生。如果它们属于不同的BFC,那么外边距将不会重叠。所以通过创建一个新的 BFC 我们可以防止外边距重叠。

效果图:

CSS FLOAT 学习笔记

3 闭合浮动

一个 BFC 可以包含浮动元素。很多时候我们会碰到这种情况:一个容器里的浮动元素脱离页面的常规流,导致容器的高度坍塌。我们通常使用伪元素来清除浮动。但我们同样可以通过定义一个 BFC 来达到这个目的。

效果:

CSS FLOAT 学习笔记

为了解决这个问题,我们通过在容器中创建一个 BFC 包含浮动元素

效果图:

CSS FLOAT 学习笔记

现在,这个容器的高度将扩展到可以包含它的浮动的子元素。在这个 BFC 中,这些元素将会回到页面的常规文档流

4 防止文字环绕

有时候一个浮动 div 周围的文字环绕着它(如 Figure1 所示)。但是在某些场景中我们想要的效果如 Figure2 所示。为了解决这个问题,我们可能使用外边距,但是我们也可以使用一个 BFC 来解决。

CSS FLOAT 学习笔记

首先让我们理解文字环绕现象的产生原因:

CSS FLOAT 学习笔记

上图的 HTML Markup 如下所示:

在上图中的整个黑色区域为 p 元素。正如我们所看到的,由于这个 .floated 浮动了,脱离了常规文档流,不占空间。因此 p 元素自动上移,占据 .floated 原有的空间。因此 p 元素出现在 .floated 的下方。浮动框不会影响块级框的布局,但是会影响内联框的排列。因此 p 元素的 line boxes(文本行) 水平收缩进行了移位,为浮动元素提供了空间。随着文字的增加,因为 line boxes 不再需要移位,最终将会环绕在浮动元素的下方。

让我们回顾W3C 的标准:

在 BFC 中,每个盒子的左外边框紧挨着包含块的左边框(从右到左的场景中,则为右边框紧挨着包含块的右边框),即使在浮动里也是这样的(尽管一个盒子的边框会因为浮动而萎缩)。除非这个盒子的内部创建了一个新的BFC(这种情况下,由于浮动,盒子本身将会变得更窄)

根据标准,如果这个 p 元素创建了一个新的 BFC,那么它将不会紧挨着容器块的左边缘。这样就解决了文字环绕在浮动元素周围的问题。

让我们从文字环绕的布局开始:

效果图:

CSS FLOAT 学习笔记

让我们创建 BFC 解决文字环绕现象:

效果图:

CSS FLOAT 学习笔记

IE6-7的 hasLayout

IE 的 hasLayout 与 BFC 类似。IE6-7 的显示引擎使用一个称为布局(layout)的内部概念来控制元素的尺寸和定位。那些 hasLayout 的元素负责本身及其子元素的尺寸设置和定位。如果一个元素的 hasLayout 为 false,那么它的尺寸和定位由最近的拥有布局的祖先元素控制。

hasLayout的触发条件

  • position: absolute;
  • display: inline-block;
  • float: left | right;
  • width: 非auto
  • height: 非auto
  • zoom: 非normal
  • writing-mode: tb-rl;
  • overflow: hidden | scroll | auto; (IE7特有)

IE8 使用了全新的显示引擎,据称不使用 hasLayout 属性了,因此解决了很多深恶痛绝的 bug。但 IE8-11 通过「document.documentElement.currentStyle.hasLayout」依然可以获得 hasLayout 的标志。

小结

综上所述,在支持 BFC 的浏览器(IE8+,firefox,chrome,safari)通过创建新的 BFC 闭合浮动;在不支持 BFC 的浏览器(IE6-7)通过触发 hasLayout 闭合浮动。

清除(闭合)浮动的优化方法

  • 优化1
  • 优化2
weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: