• 关于

    bfc

    的搜索结果

回答

"触发bfc能解决margin collapse"这句话本身就有问题,触发bfc(这句话其实也有问题,更确切的说法是建立的新bfc(establish new block formatting context),bfc是个名词啊)之所以能解决margin collapse,是因为margin collapse的一个前提条件是“处于同一bfc下的相邻元素可能发生margin collapse”,新建bfc影响的是子元素所处的bfc,自身所处的bfc不受影响,故父元素新建bfc使得父元素在老bfc下,子元素在父元素新建立的bfc下,所以生效,但是若子元素新建bfc,那么父元素和子元素仍然处于原有的bfc下,子元素的子元素才处于新的bfc下,既然父子元素仍然处于同一bfc,当然不生效啦。另inline-block触发ifc,ifc下永远不发生maragin collapse。

杨冬芳 2019-12-02 02:52:20 0 浏览量 回答数 0

回答

2# body在什么时候能够创建BFC?测试一下常规的BFC创建方式:给body加上overflow:hiddenhttp://jsfiddle.net/0yjxurfv/4/点击预览结果:无法触发BFC的创建。给body和html同时加上overflow:hiddenhttp://jsfiddle.net/0yjxurfv/5/点击预览结果:可以触发BFC的创建。给body加上display:table、display:inline-block、position:absolutehttp://jsfiddle.net/0yjxurfv/6/点击预览结果:可以触发BFC的创建。为何呢?W3C CSS2.1中,BFC是这样被定义的:Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.overflow:visible以外的块级元素将创建BFC,除非该值已经扩散到了视口。(大部分中文资料都没有译出这个except,直到这个问题被提出,我也没有意识到这个except适用于哪个场景)再寻找overflow:hidden的标准:UAs must apply the 'overflow' property set on the root element to the viewport.When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'.The 'visible' value when used for the viewport must be interpreted as 'auto'.The element from which the value is propagated must have a used value for 'overflow' of 'visible'.按语序提取一下(这段颠三倒四颠鸾倒凤的话的)要点:UA需要将root元素上的overflow属性置于视口之上;overflow扩散行为:当root元素是html元素且overflow为visible,而且html元素有body作为其子元素,UA则需要将第一个body之上的overflow属性应用于视口;用于视口的overflow: visible将被解析为overflow: autooverflow扩散行为将导致body的使用值为overflow: visible我们可以解释本节的三个用例里发生的事情了:给body加上overflow:hidden,无法触发BFC创建。解释:本用例中body {overflow:hidden} html {overflow: visible}(html为默认overflow),body的overflow:hidden被应用于视口,body的最终使用值为overflow:visible,因此body没有创建BFC。给body和html同时加上overflow:hidden,成功触发BFC创建。解释:本用例中body, html{overflow:hidden},html的overflow:hidden被用于视口,body的overflow计算值是hidden,因此创建了BFC。给body加上display:table、display:inline-block、position:absolute,成功触发BFC创建。解释:这些属性都导致body正常创建了BFC。LZ的用例2的body没有创建BFC因此没有避免margin折叠,用例3的body成功创建了BFC因此避免了margin折叠。

a123456678 2019-12-02 02:23:57 0 浏览量 回答数 0

回答

是由一个叫BFC(Block formatting context)的东西引起的。BFC的布局规则:内部的Box会在垂直方向,一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。BFC的区域不会与float box重叠。...触发BFC的情况:根元素float属性不为noneposition为absolute或fixeddisplay为inline-block, table-cell, table-caption, flex, inline-flexoverflow不为visible你要避免相邻块元素外边距重叠的话,那你就要避免产生BFC。

a123456678 2019-12-02 02:23:46 0 浏览量 回答数 0

阿里云试用中心,为您提供0门槛上云实践机会!

0元试用32+款产品,最高免费12个月!拨打95187-1,咨询专业上云建议!

回答

1.UA需要将root元素上的overflow属性置于视口之上;2.overflow扩散行为:当root元素是html元素且overflow为visible,而且html元素有body作为其子元素,UA则需要将第一个body之上的overflow属性应用于视口;3.用于视口的overflow: visible将被解析为overflow: auto4.overflow扩散行为将导致body的使用值为overflow: visible我们可以解释本节的三个用例里发生的事情了:1.给body加上overflow:hidden,无法触发BFC创建。解释:本用例中body {overflow:hidden} html {overflow: visible}(html为默认overflow),body的overflow:hidden被应用于视口,body的最终使用值为overflow:visible,因此body没有创建BFC。2.给body和html同时加上overflow:hidden,成功触发BFC创建。解释:本用例中body, html{overflow:hidden},html的overflow:hidden被用于视口,body的overflow计算值是hidden,因此创建了BFC。3.给body加上display:table、display:inline-block、position:absolute,成功触发BFC创建。解释:这些属性都导致body正常创建了BFC。LZ的用例2的body没有创建BFC因此没有避免margin折叠,用例3的body成功创建了BFC因此避免了margin折叠。最后,不要完全相信任何非一手的资料,尤其是中文资料

杨冬芳 2019-12-02 02:32:13 0 浏览量 回答数 0

回答

什么是 BFC: BFC(Block Formatting Context)格式化上下文,是 Web 页面中盒模型布局的 CSS 渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。 形成 BFC 的条件: 浮动元素,float 除 none 以外的值 定位元素,position(absolute,fixed) display 为以下其中之一的值 inline-block,table-cell,table-caption overflow 除了 visible 以外的值(hidden,auto,scroll) BFC 的特性 内部的 Box 会在垂直方向上一个接一个的放置。 垂直方向上的距离由 margin 决定 bfc 的区域不会与 float 的元素区域重叠。 计算 bfc 的高度时,浮动元素也参与计算 bfc 就是页面上的一个独立容器,容器里面的子元素不会影响外面元素。

茶什i 2019-12-02 03:16:40 0 浏览量 回答数 0

回答

是由一个叫BFC(Block formatting context)的东西引起的。BFC的布局规则:•内部的Box会在垂直方向,一个接一个地放置。•Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠•每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。•BFC的区域不会与float box重叠。•...触发BFC的情况:•根元素•float属性不为none•position为absolute或fixed•display为inline-block, table-cell, table-caption, flex, inline-flex•overflow不为visible你要避免相邻块元素外边距重叠的话,那你就要避免产生BFC。参考:http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

杨冬芳 2019-12-02 02:32:37 0 浏览量 回答数 0

回答

定位参照元素的问题。absolute元素的定位参照元素为其父辈元素中第一个非static定位的元素,若其父辈元素均为static定位,则其定位参照元素为初始包含块,这里可以理解为 html 元素。设置height:100%中100%是相对定位参照元素来说,因此为relative的元素设置100%不会产生效果,因为其相对body定位,而body的默认高度为0。而为absolute的元素设置100%产生效果是因为初始包含块的高度为 viewport 的高度。这里如果将 body 设置position: relative,则absolute和relative元素将具有相同的 height 表现BFC 问题。由于position:abolute会使当前块级元素称为一个 BFC 容器(通常称为触发 BFC),而包裹所有浮动元素是 BFC 容器的特性,position:abolute的元素可以包裹浮动元素而position:relative的元素不可以。有关 BFC 的详细内容可以参考博文:http://zjy.name/archives/bfc-introduction.html

西秦说云 2019-12-02 02:29:25 0 浏览量 回答数 0

问题

使用不同方法创建的bfc有无区别?

杨冬芳 2019-12-01 20:04:08 924 浏览量 回答数 1

回答

BFC 就是块级格式上下文,是页面盒模型布局中的一种 CSS 渲染模式,相当于一个独立的容器,里面的元素和外部的元素相互不影响。创建 BFC 的方式有: html 根元素float 浮动绝对定位overflow 不为 visiabledisplay 为表格布局或者弹性布局 BFC 主要的作用是: 清除浮动 防止同一 BFC 容器中的相邻元素间的外边距重叠问题

九旬 2020-05-24 11:48:28 0 浏览量 回答数 0

回答

定位参照元素的问题。absolute元素的定位参照元素为其父辈元素中第一个非static定位的元素,若其父辈元素均为static定位,则其定位参照元素为初始包含块,这里可以理解为 html 元素。设置height:100%中100%是相对定位参照元素来说,因此为relative的元素设置100%不会产生效果,因为其相对body定位,而body的默认高度为0。而为absolute的元素设置100%产生效果是因为初始包含块的高度为 viewport 的高度。这里如果将 body 设置position: relative,则absolute和relative元素将具有相同的 height 表现BFC 问题。由于position:abolute会使当前块级元素称为一个 BFC 容器(通常称为触发 BFC),而包裹所有浮动元素是 BFC 容器的特性,position:abolute的元素可以包裹浮动元素而position:relative的元素不可以.

a123456678 2019-12-02 02:25:49 0 浏览量 回答数 0

问题

clear属性能把父元素自动撑高,其背后的实现原理是什么?

杨冬芳 2019-12-01 19:47:59 1049 浏览量 回答数 0

问题

什么是BFC

茶什i 2019-12-01 21:59:18 21 浏览量 回答数 1

问题

介绍下 BFC 及其应用? #前端面试

九旬 2020-05-23 13:52:13 6 浏览量 回答数 1

问题

清除浮动和BFC的区别

杨冬芳 2019-12-01 20:10:24 941 浏览量 回答数 1

回答

BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的 margin 会发生折叠。 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行布局,以及与其他元素的关系和相互作用。

小柯卡力多 2019-12-02 03:21:56 0 浏览量 回答数 0

问题

关于bfc的问题. 应该是bfc

杨冬芳 2019-12-01 19:43:46 630 浏览量 回答数 1

回答

当IE遇到问题的时候,尤其是IE67,zoom: 1可以激活BFC,然后激活BFC后就可以解决好多问题啦

杨冬芳 2019-12-02 02:31:29 0 浏览量 回答数 0

回答

当IE遇到问题的时候,尤其是IE67,zoom: 1可以激活BFC,然后激活BFC后就可以解决好多问题啦

a123456678 2019-12-02 02:25:01 0 浏览量 回答数 0

问题

前端面试经典题目合集-对BFC规范的理解?

小柯卡力多 2019-12-01 22:04:40 8 浏览量 回答数 1

回答

原因两点: 跟绝对定位有关系! 图片的宽高值。 首先看两个定义: 网页中的元素它是replaced element,也就是可替换元素。在W3C的说明中已经说的很清楚,如果你不给他设定宽高度,他会以根据src属性生成的图片自身宽高度来作为他的宽高;如果你给他设置了宽高,那么他会以你设置的宽高作为他在页面上展示的宽高。 还有一个定义,BFC。#box1是绝对定位,所以他生成了一个BFC,在BFC元素中的元素会自动从左到右依次排列。但是它下面的子元素div由于又设定了绝对定位,所以他又会生成一个BFC,这个里面的div大小会根据他下面的img给撑起来。 继续看这个问题,一开始设定图片的宽高为100%,这个100%的作用肯定是用来让图片全部铺满父元素的;只可惜他的父元素是一个没有宽高的空的,所以图片的展示效果也就是看不到了。 当你把图片的宽高100%去掉之后,这个可替换元素的宽高会自动变成图片自身的宽高,也就会出现了。

a123456678 2019-12-02 02:23:22 0 浏览量 回答数 0

回答

问题1: 为什么ul的宽会是800px?而不是1200?题主已经说了,创建了新的BFC(establishes a new block formatting context)的元素,不会与float重叠,因此。w3c的表述是:The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.其中must not overlap就是说不重叠了,所以ul在width为auto的默认情况下,实际宽度比包含块小。问题2:给ul设置宽为1200px的时候,ul为什么不会换行?overflow不是触发了bfc不会和float重碟吗?经测试,在Firefox下不换行。但IE及Chrome下,都会认为空间不足而换行。一般来说,Chrome和Firefox同作为现代浏览器,它们的兼容差异是很少的,像这种有差异的情况,可以认为是w3c尚未详细描述的边缘细节。就这个具体问题来说,如果w3c的must not overlap是字面意思的话,也只是说,目前Chrome和IE对这个地方实现地更正确一些,仅此而已。问题3:当子元素含有float的时候,此元素是不是也触发了bfc?建立新的BFC的条件:1.视口提供的初始包含块(根元素)2.浮动元素3.绝对定位元素4.display为inline-block、table-cell、table-caption的计算值的元素(行内块、表格标题、单元格)5.overflow不为visible的块元素所以,如果问题里的”元素“是指这个浮动子元素的话,那就是“建立了新的BFC”。

杨冬芳 2019-12-02 02:35:15 0 浏览量 回答数 0

回答

实际上设置display:table实际是利用了使父容器形成BFC而display:block是不会清除浮动的,它是利用了clear:both来清除浮动的建议看看这篇文章,如果有兴趣还可以专门研究一下BFC

杨冬芳 2019-12-02 02:38:50 0 浏览量 回答数 0

回答

a标签是行内元素直接添加width,height是不行的。不用display:block或者inline-block的话,还有BFC可以实现。一个BFC(块级格式化上下文)是满足以下条件中至少一条的盒模型:float的值不为空overflow的值不为visibledisplay的值是table-cell、table-caption或者inline-block之一position的值不为static或者relative

a123456678 2019-12-02 02:21:44 0 浏览量 回答数 0

回答

1.a.pull-left的设置了float:left(通过浏览器控制台查看CSS实际CSS样式),就作为一个块级元素脱离正常文档流被渲染2.如果div.content不设置overflow:hidden,那么div.content是一个普通的div块级别元素,其左上角将对齐其包含块元素的左上角。并且位于a.pull-left元素的下方,按float元素的特点,其周边元素的文本将围绕其显示如图所示,可以理解为布局div.content元素时权当a.pull-left元素不存在3.如果div.content设置overflow:hidden,那么div.content构成一个独立的BFC(块级格式化上下文),而一个BFC区域不会与float元素重叠并且其中的子元素对外部元素在布局上互不影响(这点和非BFC区域不同);那么导致的结果就是div.content元素向右移动直到和a.pull-left元素区域不发生重叠(div.content元素的左外边距和a.pull-left元素右外边距不重叠),此时的效果和div.content设置float:left的效果相同如图所示:

杨冬芳 2019-12-02 02:57:41 0 浏览量 回答数 0

问题

重提CSS中外边距折叠问题

杨冬芳 2019-12-01 19:40:18 942 浏览量 回答数 1

回答

.test2 的 overflow 默认为 visible,导致两个结果:1.没有创建 BFC,故其外边缘紧贴父盒左侧,内部的行盒会因 .test1 的浮动而缩小,由于 .test1 所占空间等于 .test2 行盒最大宽度(俩的宽度设定是一样的),故整个 .test2 内部的行盒空间都被挤占了,所以看不到其绿色背景,同时文本溢出2.溢出的内容可见,故其溢出的文本叠在了 .test3 上面当设为 overflow: hidden 时,触发 BFC,.test2 就不会紧贴在其父盒左侧,而是去占浮动之外的空间,这时候就出现在了 .test1 的旁边。推荐阅读:https://segmentfault.com/a/1190000003068...

杨冬芳 2019-12-02 02:42:58 0 浏览量 回答数 0

回答

可以利用创建了新的BFC的元素不会和浮动元素重叠来做。简单来说,左侧左浮动,右侧右浮动,中间是创建了新的BFC的元素即可。示例代码: <style> .co .left {background:red;width:150px;float:left;} .right {background:blue;margin-right:15px;float:right;} .center {background:green;overflow:hidden;text-align:center;} </style> <div class="left">left</div> <div class="right">right</div> <div class="center">center</div>

a123456678 2019-12-02 02:23:51 0 浏览量 回答数 0

问题

关于float文字环绕的问题?(BFC方法)

a123456678 2019-12-01 19:32:27 888 浏览量 回答数 1

回答

可以看看 深入理解BFC和Margin Collapse,这篇文章

杨冬芳 2019-12-02 02:40:20 0 浏览量 回答数 0

回答

www.bfc8.cn 这个是你隔壁IP的网站

看头像 2019-12-02 03:02:04 0 浏览量 回答数 0
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站