javascript - 一个元素创建的BFC包含元素自身吗 ?CSS BFC 块格式化上下文
高洛峰
高洛峰 2017-04-11 11:08:04
0
2
392

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

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

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

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

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

reply all(2)
Peter_Zhu

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

小葫芦

只有普通文档流中块级元素的垂直外边距才会发生外边距叠加。行内框,浮动框与绝对定位框之间的外边距不会叠加。
两元素必须相毗邻(没有被内边距、边框以及任何东西隔开)BFC

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!