以一己之力破坏浏览器布局的美感——破坏float与BFC

在CSS的世界里，"流"——文档流，是最基本的定位和布局机制。如同流水一般，浏览器中的元素默认从左到右（内联元素），从上到下（块级元素）堆砌布局。被设置了float属性的元素呈现包裹性，即其自身的width不是默认撑满父元素，而是和height属性一样由子元素决定。脱流离文档流，脱离对正常的文档流的污染，但同时也会造成页面整体布局的混乱。BFC（Block Formatting Context）——块级格式化上下文，能够建立一个独立的布局环境，让其中的元素和外部元素互不干扰。破浮与破坏BFC，更像是不得不用的解毒剂，强行扭转float属性造成的混乱局面，回复正常合理的页面布局效果，让“流”能够更加平静流畅地流淌。

了解float属性的破坏性，就要知道它有多强大。float的本质是对排版顺序的干扰，就像是一双横空出世的铁手，将不情愿的元素按顺序打破队列、安置在它满意的位置，不惜破坏整个队伍的规则秩序。

它可以为元素提供一个独立的位置，无视父元素的限制。
它可以让你在布局中创建多列布局或将图片和其他元素环绕排版。
它甚至可以帮助你实现一些复杂的布局效果，比如倾斜元素或创建重叠元素。

然而，浮动的强大也意味着，滥用它很可能对你的布局造成极大的伤害。常见的有：

不当使用float属性会增加HTML和CSS代码的复杂性。
浮动元素可能与相邻元素重叠，导致布局混乱。
浮动元素会导致文本不规则断行，影响阅读体验。
浮动元素可能无法正确的与其他元素交互，影响网站的可访问性。

更可怕的是，float属性对页面布局的破坏可能还会导致网站的加载速度变慢，毕竟强行扭转常规，是要付出代价的。

为了避免float属性对页面布局的破坏，你需要注意以下几点：

使用float属性要谨慎。
不要在同一行中使用多个浮动元素。
使用float属性时要明确设置元素的宽度和高度。
使用float属性时要考虑元素的顺序。
使用clear属性来清除浮动。

不过，若是遇到了需要一决胜负、不得不违背“流”的原则的布局困境，还有更强有力的解决办法——BFC（Block Formatting Context）——块级格式化上下文。它是一个能够建立独立布局环境的容器，让其中的元素和外部元素互不干扰。创建BFC的方法有：

使用overflow: hidden;
使用float: left;或float: right;
使用display: inline-block;
使用display: table-cell;
使用position: absolute;或position: fixed;

当元素被包含在BFC中时，它将成为一个独立的布局环境，其中的元素将独立于其他元素布局。这样一来，即使浮动元素造成了不正常的元素排序，也不会影响到BFC外部的元素。

使用BFC可以解决float属性对页面布局的破坏，但是也需要注意以下几点：

BFC的创建可能会增加HTML和CSS代码的复杂性。
BFC可能导致某些元素无法正确的与其他元素交互，影响网站的可访问性。
BFC可能会导致文本不规则断行，影响阅读体验。

因此，在使用BFC之前，需要权衡利弊，在必要的时候才使用BFC。

使用float属性和BFC都是创建复杂布局的利器，但滥用它们很容易对页面布局造成破坏。因此，在使用这些属性之前，一定要慎重考虑，避免造成不必要的麻烦。