摘要:概念块格式化上下文,是页面块级元素布局及浮动元素彼此交互的区域。阻止相邻元素外边距合并的方法被非空内容或分隔开。不在一个普通流中或用分割开。让在垂直方向上不毗邻。
BFC概念
BFC(block formatting context)块格式化上下文, 是Web页面块级元素布局及浮动元素彼此交互的区域。BFC是一个独立的布局环境,(实际页面渲染时是不可见的),由BFC构建的区域其内部元素的布局是不受外界的影响的,利用这个特性可用来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。在BFC中元素从顶端开始垂直地一个接一个地排列,两个元素之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中,两个相邻的块级元素的垂直外边距会产生折叠。(后面详细解释)
形成BFC的条件:1.浮动、绝对定位、fixed定位,这些方式都能让元素脱离文档流形成独立的BFC。
2.display:inline-block/table-cells/table-captions/inline-flex(非块级元素的块容器元素)
3.overflow:auto/hidden/scroll
overflow属性本身并没有什么特别之处,但是是会产生BFC创造独立布局环境,使元素不受浮动元素的影响。
使用BFC清除浮动效果示例:
1.清除浮动带来的副作用(将浮动限定在BFC区域中)
2.撑开父元素(包住浮动元素) 清除浮动就是撑开父元素
3.阻止外边距合并
4.BFC独立性可用来布局
1.同一个BFC环境中,处于普通文档流中的垂直相邻元素的外边距合并。
2.父子元素的外边距合并。
3.空元素自身的外边距合并。
如果这个外边距遇到另一个元素的外边距,它还会发生合并
1.两个margin都是正值的时候,取两者的最大值;
2.当 margin 都是负值的时候,取的是其中绝对值较大的,然后,从0位置,负向位移;
3.当有正有负的时候,先取出负 margin 中绝对值中最大的,然后和正 margin 值中最大的 margin 相加。
所有毗邻的margin要一起参与运算,不能分步进行。
1.被非空内容、padding、border 或 clear 分隔开。
2.不在一个普通流中或用BFC分割开。
3.让margin在垂直方向上不毗邻。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113541.html
摘要:官方说法就是它规定了用户端在媒介中如何处理文档树。是的包含块,同时又是的包含块,不是绝对的。因此称为匿名盒子。行内盒子行内级元素会生成行内级盒子,该盒子同时会参与行内格式化上下文的创建。如果只有一个值指定为,则其使用的值来自相等。 作者:陈大鱼头 github: KRISACHAN 盒模型 The CSS box model describes the rectangular b...
摘要:浮动,绝对定位元素,非块盒的块容器例如,,和和不为的块盒当该值已被传播到视口时除外会为它们的内容建立一个新的块格式化上下文布局规则内部盒会在垂直方向一个接一个的放置盒的垂直方向的距离由决定属于同一个的两个相邻盒子的会发生重叠每个元素的 浮动,绝对定位元素,非块盒的块容器(例如,inline-blocks,table-cells和table-captions)和overflow不为vis...
阅读 2407·2021-10-09 09:44
阅读 3739·2021-09-22 15:43
阅读 2897·2021-09-02 09:47
阅读 2502·2021-08-12 13:29
阅读 3831·2019-08-30 15:43
阅读 1655·2019-08-30 13:06
阅读 2156·2019-08-29 16:07
阅读 2717·2019-08-29 15:23