javascript - 一个元素创建的BFC包含元素自身吗 ？CSS BFC 块格式化上下文

问题描述

问 题

<div style="background: red;width: 100px;height:100px;margin-bottom: 10px;display:inline-block"></div>//

    <div  style="background: black;width: 100px;height:100px;margin-top: 20px;"></div>

当且仅当下列情况发生，则称两个外边距相邻：
双方都是同一个块格式化上下文中属于正常排版的块级框。
第一个DIV加了display:inline-block。是不是意味着创建了一个新的BFC？这个BFC包括DIV本身和DIV的内容（比如子元素）？还是说不包括DIV 只包括内容（子元素）？
第二个问题：如果包含元素本身？那么下句号怎么解释？不是自相矛盾吗。如果不包元素本身，那上面那就自相矛盾啊。
clear该属性表明元素的框的哪一边不能与先前的浮动框相邻。'clear'属性不考虑在元素自身或者在其它块格式化上下文里面的浮动。

当应用于非浮动的块框时，

解决方案

首先要理解什么是格式上下文，格式上下文决定了内部元素是如何拍版的。外边距重叠的条件之一是两个盒子处于同一格式上下文中，我们说的创建新的格式上下文是指该盒子的内部元素处于新的格式上下文，而本身仍然处于原来的格式上下文中，这也就解释了为什么对于父子元素，若父元素创建了新的bfc，那么可以阻止margin重叠而子元素创建了新的bfc却不能

这篇关于javascript - 一个元素创建的BFC包含元素自身吗 ？CSS BFC 块格式化上下文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！