css中 float 和 bfc 的理解

前言

前段时间偶然看到了同学写的一篇博客，是他自己在做聊天室项目时遇到的css浮动相关的问题（点击查看原文章），文章写的很不错，但我感觉讲的还不够全，对于一些新手来说，想要理解可能还比较困难，然后我就感觉就有必要和大家分享一下关于浮动和css的隐藏属性BFC，我会先从文档流开始介绍，以便让大家更好的理解浮动的相关特性。

什么是文档流

1、从左至右，从上至下的布局。
2、符合html中标签本身含义的布局，比如某些标签独占一行。有些标签属于行内元素等。
理论都过于枯燥，直接上一个简单的例子给大家理解

如图所示，就是一个普通的页面，页面上就放了两个普通的div

而按道理来说，一个div才60px，屏幕宽度完全可以容纳下很多个60px的div，为什么蓝色的div不是和红色的在同一行呢

ok，话不多说，我反手就打开控制台检查一下元素给大家看看

我们可以看到，第一个红色的div虽然只有60px的大小，而它的“隐藏宽度”却占据了屏幕宽度的100%，因此就把蓝色的div挤到了下面一行，这不仅仅是div的特点，所有块级元素都是这样，在页面上独占一行，这就是标签本身含义的布局，这样说大家应该对文档流有了一个一定的理解

什么是浮动

这边我就自述一下我对浮动的理解，浮动，就是飘起来，像气球一样，往上飘，浮动最大的一个特点就是 脱离文档流，这是什么意思呢？脱离文档流又有什么用呢？来，上例子 ~

依旧是这个页面，不同的是我给box1添加了一个float:left的属性

我们来看一下页面，是不是发现那个蓝色的box2 “不见了”，而其实它不是不见了，而是被我们红色的box1盖住了，我们这边再来检查一下box1元素


我们发现，box1的大小变成了只有60px，不仅如此，box1在页面上 不！占！据！位！置！，这是什么意思？通俗来说，你看到它了，但没有完全看到它，它有大小，但是不占地方，所以和它一样大的box2才会被它盖在下面，这就是脱离文档流，不仅用float可以脱离文档流，绝对定位（absolute）也会使元素脱离文档流。

浮动的缺点

前面我们知道了浮动可以使元素脱离文档流，在页面上不再占据位置，很显然，事情都有两面性，脱离文档流的缺点也是非常明显的，而且在实战里，我们也是必须要解决这个缺点的，脱离文档流的缺点是什么呢？让我们往下看例子

一个普通的页面，上面有一个div，div里面包裹了一个子div

运行结果如图
我们可以看到，我们虽然没有给父级的div设置高度，但父级的div高度被我们子div的高度撑开了，这是普通的文档流的效果，下面我给box2添加浮动，我们来看一下效果

可以看到，我们由于box2脱离了文档流，在页面上不再占据位置，因此box1就没有了高度，只剩下了自己本身的边框，这很显然是一个非常坏的存在，平常工作中，我们都习惯性的不给父容器设置高度，父容器的高度一般都是被内容撑起来的，这样就不会有多余的空白区域，页面就不会太难看，而页面中部分元素如果脱离了文档流，不占据位置，那页面的整体布局就会 垮！掉！，所以，我们必须要解决这个问题。

关于BFC

BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

bfc一直都是css的一个隐藏属性，上面关于bfc解释有些同学可能还不懂是什么意思，简单来说就是 如果给一个元素开启了bfc，那么它就会在一个独立的空间里，不再受周围元素的影响，就好像英雄联盟里的铁男开大一样，你懂我意思吧。

那么如何开启bfc呢？那方法真的太多了嗷~，我这边就简单介绍几个比较经常用的，并且缺点较小的开启bfc的方法。

1、overflow 除了 visible 以外的值（hidden，auto，scroll）

有些人很好奇，overflow不是用在超出文本隐藏么？没错，是这样，但如果给overflow设置了hidden或者auto或者scroll，那么其实默认会给当前元素开启隐藏属性bfc，这边我给上面的案例的父级div添加一个overflow：hidden，让我们来看一下效果


我们可以看到，父元素的高度又回来了~，这就是开启bfc的效果，它不会受到周围元素的影响，保持本身该有的样子！，就这么理解吧，我也不知道怎么说了，文化水平不够

2、float，一起飘

我们打不过怎么办？打不过就加入它嘛！，你飘我也飘！
依旧是这个页面，这次是给父div也开启了浮动，让我们看一下效果


可以看到，父div的高度又回来了，但这个开启bfc的缺点我们也能看到，父div的大小，完全是靠子元素决定的

3、终极解决方案 clearfix

clearfix在很多框架中都能看到，它就是一个类，它的实现原理是通过css的伪元素，为需要开启bfc的元素在前后添加一些你“看不见的东西”，以保证该元素的高度不受浮动影响，ok，直接看代码！

可以看到，我在页面中添加了一个clearfix的样式，并且在父div中添加了这个类

结果很显然，不用我再多解释了吧，我累了 （手动狗头保命）

这里有一个 clear属性，可能有一些朋友不知道是什么，妥，脏活累活交给我，我来解释

4、bfc的一个超级经典的应用场景

我们直接看代码案例，如图所示，页面上有一个大的红色div，里面包裹了一个小的蓝色div

此时我们给 蓝色的div 一个 margin-top，按道理来说，蓝色的div 会距离 红色的div 顶部有个距离


但是我们看到的却是红色的div距离顶部有个20px的距离，这其实涉及到了外边距重叠的问题了，那么要想解决这个问题，就是给 红色的div 开启bfc，让它成为有个独立的“区域”，这边我演示一下


我们可以看到，蓝色的 margin-top 生效了，并且没有传递给父级div

关于 clear 属性

使用clear属性，就是设置元素的某一侧 不允许出现浮动元素，清除浮动带来的影响，看案例

又回到最初的起点，两个div，给第一个div设置了浮动，可以看到，第二个蓝色的div被红色的div盖住了


此时，我们给第二个div设置一个 clear:left

我们可以看到蓝色的div又回到了最初的起点，因为它清除了左侧div浮动对它带来的影响！所以它才能重新回来，同时，clear的可选属性还有 right,both，如你所见，right就是清除右侧元素浮动所带来的影响，both就是左右边 都不允许存在浮动的元素，我们在平常工作里，一般都使用 clear:both 来简单清除浮动带来的一些影响，好了，这就是我这篇文章所想要和大家分享的~，see ya！