BFC概念：
块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上下文”。
先记住一个原则： 如果一个元素具有BFC,那么内部元素再怎么翻江倒海，翻云覆雨，都不会影响外面的元素。所以，BFC元素是不可能发生margin重叠的，因为margin重叠会影响外面的元素的；BFC元素也可以用来清除浮动带来的影响，因为如果不清除，子元素浮动则会造成父元素高度塌陷，必然会影响后面元素的布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定。
以下情况会触发BFC:
•<html>根元素
•float的值不为none
•overflow的值为auto，scroll，hidden
•display的值为table-cell，table-caption和inline--block中的任何一个
•position的值不为relative和static 即 position: absolute/fixed
显然我们在设置overflow值为hidden时使container元素具有BFC，那么子元素child浮动便不会带来父元素的高度坍塌影响。
利用伪类元素清除浮动：
.clearFix::after,.clearFix::before {
display: block;
content: '';
clear: both;
visibility: hidden;
height: 0;
}
.clearFix { zoom: 1;}为什么设置overflow为hidden可以清除浮动带来的影响
在平时的业务开发写CSS中，为了满足页面布局，元素的浮动特性我们用的不能再多了。使用浮动的确能够解决一些布局问题，但是也带了一些副作用影响，比如，父元素高度塌陷，我们有好几种可以清除浮动的方法，最常用的就是设置父元素的overflow:hidden这个属性
详解利用clear清除浮动的一些问题解决
我们一直在说 解决 高度塌陷都问题，从来没有说清除浮动。 是因为本质上，浮动并没被清除，我们只是利用clear属性解决了浮动元素带来的父级元素高度塌陷问题。而且clear属性影响也只是设置clear属性的元素本身，而不是浮动元素。
css清除浮动的原理
最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解
清除浮动的4种方式
清除浮动：根据情况需要来清楚浮动 。清除浮动的目的： 就是为了解决 父 盒子高度为0 的问题。1.、额外标签法 给浮动盒子的后面添加一个新的div；2、overflow:hidden 触发了bfc模式
我对BFC的理解
对CSS有了解的道友们肯定都知道盒式模型这个概念，对一个元素设置CSS，首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子，同样管理inline类型的盒子还有IFC，以及其他的FC。
Web布局：浮动
不知道大家是否和我有同样的一个感觉，每当拿起一篇杂志文章，总能发现左边或右边有图片，文字流畅地围着图片，这就是打印世界中看到的浮动：在Web的世界中，CSS的 float 设计初衷也是用来处理文本围绕图片排版的，就像在杂志布局中一样
总结清除浮动的方法
方法一、在结尾处添加空div标签clear:both；方法二、父级div定义 overflow: auto；方法三、使用伪元素来清除浮动(:after,注意：作用于浮动元素的父亲）
CSS如何清除浮动？清除浮动的几种方式
在前端开发过程中，我们经常会使用到浮动(float)，这个我们即爱又恨的属性。爱，是因为通过浮动，我们能很方便地进行布局；恨，是因为浮动之后遗留下来太多的问题需要解决。下面本篇文章给大家介绍CSS清除浮动的几种方法
BFC是个啥？
在CSS布局中，是通过对一个个box的布局，来实现整体页面的布局，这一个个box也就是一个个容器元素，这些元素分为两类：块级元素(block)，行内元素(inline)。 对于不同类型的元素
CSS浮动标准修复top塌陷和清除浮动及IE兼容标准格式
浮动元素有左浮动(float:left)和右浮动(float:right)两种，浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!