BFC深入理解

块级格式上下文 让元素展现成BFC

• dispaly:flex inline 1.外边距层叠 之前对css的了解，总是有一个问题，比如两个div设置宽高都是300px,margin:10px. 我都以为这两个div是上下结构，之前间距是 20px，因为上一个margin-bottom:10px和margin-top：10px，其实不然，从实际的代码中可以看到两者的间隔只有10px，而在某些列子中，则会出现20px，这里我有些糊涂，现在才明白，这其实是body是BFC的原因，出现外边距层叠的原因，如果想取消这个外边距层叠，则是用两个div的syle="overflow"包裹住着两个div，则可以实现。 2.清除浮动 浮动的意思就是，脱离文档流，实际上就是原先的显示div，p，table这些标签都是在一个平面上,现在给予某个标签一个浮动，或绝对定位，那么这个标签就相当于浮起来高出了这个页面，而这个标签的父标签，因为子元素，浮起来，则它自己就没有了子元素高度来撑起来，变成了一条线，想一想袋子里装的东西，拿出来，袋子就不会鼓起来来了，而此时给予父标签（元素）一个BFC，清除浮动，那么父标签（元素），就是依然计算子元素的高度，不会坍缩，这就是清除浮动。 3.阻止元素被浮动元素覆盖 如果给某一个元素浮动属性，则它会覆盖另一个元素，如果不想让另一个元素被覆盖，可以给他一个，overflow:hidden,则另一个元素不会被覆盖