深入学习CSS3中的浮动、清除浮动以及BFC

秒速五厘米 2022-05-28 02:22 184阅读 0赞

做测试题的时候遇到了一个关于BFC的题目，what？什么是BFC，然后我赶紧上网查阅了各种文章以及博客，自己又动手实践了。终于把浮动和清除浮动以及BFC的问题搞清楚了，捋一下思路，总结在一起，对浮动问题有疑问的以及不了解BFC是什么的看过来喽！

一、float定义

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。按照张鑫旭的说法**浮动出现的意义其实只是用来让文字环绕图片而已，仅此而已。**而我们目前用浮动实现页面布局本不是浮动该干的事情。

*  注意：如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。另外，假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

二、浮动带来的布局问题

浮动虽然可以便于页面布局，但使用浮动会产生一些问题：最常见的问题如下

1、影响它的兄弟元素的位置：具体的影响方式要看兄弟元素是块级元素还是内联元素，若是块级元素，会无视这个浮动的块框，使得自身尽可能与这个浮动元素处于同一行，导致被浮动元素覆盖，除非这些div设置了宽度，并且父元素的宽度不足以包含这个兄弟元素，兄弟元素才会被强制换行；若是内联元素，则会尽可能围绕浮动元素

## 浮动元素对块级兄弟元素的影响 ##

我设置了左浮动 float: left ,但没有设置背景色。

我没有设置浮动，设置了蓝色背景色。

可以看出，第一个div并没有设置颜色，但实际却为蓝色背景，这是因为元素浮动后，它的块级元素会无视它的位置，仍然占据整一行，而div的内容则会自动调整，正是这样的处理，使到实际使用浮动布局时产生很多未知影响。

2、它的父元素会产生高度塌陷（当父元素没有设置高度的时候）。

## 浮动元素的内联兄弟元素与高度塌陷 ##

我设置了左浮动 float: left ,并设置橙色背景色。

我是 span ，没有设置浮动，设置了蓝色背景色。

这里同时看出两个问题。一是内联元素会围绕在设置了浮动的元素周围，而不会像块状兄弟元素那样占据一整行。另外由于浮动的元素是脱离文档流，因此父元素只会以没有浮动的 span 的高度为基础撑开自己，这就会造成父元素“塌陷”了。

三、清除浮动

显然，我们使用浮动的初衷是为了让布局更简单，但显然这不利于布局，因此我们需要想办法清除这些影响，那么下面我们就聊聊怎么清除浮动嘞

浮动虽然可以便于页面布局，但同时会产生一些问题，也就是我们常说的“副作用”。而一个元素设置了浮动（即 float 值为 left, right 或 inherit 并从父元素上继承 left 或 right 值）的常见缺陷是——影响它的兄弟元素的位置和父元素产生高度塌陷，下面对这两个问题展开说明。

清除浮动常见的方法，大的方面分为两点：1、使用clear清除浮动2、触发BFC（后面会详细详细的聊聊滴）

细分如下：

1、使用clear，它的值可以是（both，left，right，none，inherit），分别代表在元素左右两侧不允许出现浮动元素，左侧不允许出现浮动元素，右侧不允许出现浮动元素，不清楚浮动，继承父元素的值。至于要用哪一个要视情况而定（后面两个不怎么用）

2、加入空div的方法（在浮动元素和不想让浮动元素之间插入一个空的div，然后对其设置clear：both），其实还是使用clear:both。空div方法很方便，但是加入了没有涵义的 div，这违背了结构与表现分离的原则，并且后期维护也不方便。

3、overflow方法。在浮动元素的父元素上设置了 overflow 的值为 hidden 或 auto ，可以闭合浮动。只是 overflow 并不是为了闭合浮动而设计的，因此当元素内包含会超出父元素边界的子元素时，可能会覆盖掉有用的子元素，或是产生了多余的滚动条。这也是在 overflow 方法诞生后依然需要寻找更佳方法的原因。

4、使用after + zoom方法（此处内容借用张鑫旭博客的说法）

先来简单讲讲after，所谓after，就是指标签的最后一个子元素的后面。于是呢，我们可以用CSS代码生成一个具有clear属性的元素，其中的关键样式就是content了。或许您从网上看到的content里面的内容是”.”一个点，我了很多次，貌似随便写什么东西都没有问题，比如`content:'clear both';`没问题，或是`content:'张鑫旭'`也是ok的。于是有：

.fix{zoom:1;}
    .fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}

这里的line-height:0写成height：0也是可以的。显然，相对来说，这个办法不但完美兼容主流浏览器，并且也很方便，使用重用的类，可以减轻代码编写，另外网页的结构也会更加清晰。

下面是我写的代码

效果如图(content,display,clear不可少)

![20180328142441751][]

当然清除浮动的方法不止上面几种，我们说过，利用BFC特性，触发BFC并清除浮动都是可以的。

结合语义化的要求，在实际的项目中，可以使用 overflow 方法或 :after 伪元素方法。使用 overflow 方法，较为方便，在如内部元素全部为浮动元素，并且内容不会超出父元素框等情况可以直接采用 overflow 方法，但该方法毕竟会触发 BFC ，BFC 的特性是有多个的，为了避免不必要的影响，如果实际需要清除浮动元素的布局比较复杂，可以直接采用 :after 伪元素方法。

四、BFC

下面我们来聊聊BFC（Block Formatting  Context）：块级格式化上下文，从样式上看，它与普通的容器没有什么区别，但是从功能上，BFC可以看做是隔离了的独立容器，容器里面的元素不会再布局上影响到外面的元素，并且，BFC具有普通容器没有的一些特性。

通俗的解释一下：BFC相当于一堵围墙，当你触发了一个元素的BFC，那么就相当于在这个元素的四周建立起了一堵围墙，那么这时候围墙里的元素和外面的元素就不会产生相互影响

所以触发BFC的条件

*  浮动元素：float除了none以外的值
 *  使用定位，position（absolute，fixed）
 *  display为inline-block,table-cells,table-captions其中之一的值
 *  overflow除了visible以外的值（hidden，auto，scroll）
 *  flex boxes(元素的display:flex或inline-flex)

BFC的特性：

1.  BFC会阻止外边距折叠：我们知道两个相连的div在垂直上的外边距会发生折叠（这里涉及到外边距折叠的知识点，不太了解外边距折叠原理的请点击[css外边距折叠原理][css]），当我们触发了BFC的时候，就阻止了外边距折叠
2.  BFC可以包含浮动的元素：（解决因为浮动导致的高度塌陷问题）这里就是使用了overflow：hidden/auto方法闭合浮动的原理。W3C 的原文是“['Auto' heights for block formatting context roots][Auto_ heights for block formatting context roots]”，也就是 BFC 会根据子元素的情况自动适应高度，即使其子元素中包括浮动元素。但是 IE6-7 并不支持 W3C 的 BFC ，而是使用自产的 hasLayout 。从表现上来说，它跟 BFC 很相似，只是 hasLayout 自身存在很多问题，导致了 IE6-7 中一系列的 bug 。触发 hasLayout 的条件与触发 BFC 有些相似
3.  BFC可以阻止元素被浮动元素覆盖：浮动元素的块状兄弟元素会无视浮动元素的位置，尽量占满一整行，这样就会被浮动元素覆盖，为该兄弟元素触发 BFC 后可以阻止这种情况的发生。

**嗯，分享结束**

[20180328142441751]: /images/20220528/f4f3e5532f3f4a9d9e057d12d279b32b.png
[css]: https://blog.csdn.net/lhjuejiang/article/details/79732742
[Auto_ heights for block formatting context roots]: http://www.w3.org/TR/CSS2/visudet.html#root-height