老师能否把这几种BFC常见形成条件举个应用的例子呢?这里的例子不太明白啊

老师能否把这几种BFC常见形成条件举个应用的例子呢?这里的例子不太明白啊

这里给父元素直接设置overflow不就行了么,怎么img的同级元素也设置呢?

这是规定的应用方式吗,同级元素和父元素都需要设置一样的属性?那其他的几种BFC形成方式是不是也都要父元素和同级元素都设置一样的属性呢?麻烦老师每种形成方法举个简洁的例子,自己试的话感觉就算实现了BFC也会冗余一堆代码,想要简洁有效的实现代码条件

正在回答

登陆购买课程后可参与讨论,去登陆

3回答

同学你好,解答如下:

1、body 元素有 BFC 特性,这是现象,要记住;

2、两个p标签的边距造成了边框重叠现象。p外层再套一层标签 是为了让p标签放在不同的 BFC 容器中,这样就可以解决边框重叠的现象了。(可简单理解为,有BFC特性的div标签分开了两个p标签)你把p标签换成div标签,那么没有了BFC特性的标签的阻隔,所以两个div标签的边框重叠在一起了。

当overflow属性不是visible的时候,可以创建BFC,因此可以解决边框重叠的现象。

祝学习愉快~

  • Aurora_Meteor 提问者 #1
    有BFC特性的是只对里面的子元素有效,对他自身无效是吗?所以把p换成div就没用了?
    2020-06-06 19:22:28
好帮手慕星星 2020-06-07 13:58:15

同学你好,问题解答如下:

1、是的,对内部元素有效,内部元素渲染不会影响边界以外的元素

2、p是可以换为div元素的,但是需要在样式设置上区分开。例如:

http://img1.sycdn.imooc.com//climg/5edc81f109d8225504790549.jpg

自己再测试下,祝学习愉快!

好帮手慕码 2020-06-06 13:53:07

同学你好,解答如下:

1、当p标签添加bfc类名的时候,p元素宽度从图片右侧开始,并不会和父容器宽度一致,会形成一个独立的bfc模块。

http://img1.sycdn.imooc.com//climg/5edb2ac90973ea9c11880353.jpg

当不添加bfc类名的时候:

http://img1.sycdn.imooc.com//climg/5edb2ae409dc2e9810940303.jpg

p元素宽度和父容器宽度一致,因为图片浮动脱离文档流,但是不脱离文本流,所以图片下方的位置,文字还是不能占据的,所以在右侧显示。

2、没有规定同级元素和父元素都需要设置一样的属性,要具体问题具体分析。

3、创建bfc的方法可以参考视频中老师列举出的几个(不过有一些使用频率不是很高):

http://img1.sycdn.imooc.com//climg/5edb2e0d093b261613530463.jpg

在实际使用中,最最常用的就是overflow了,一般情景有:(1)overflow的去除边距重叠,如下:

http://img1.sycdn.imooc.com//climg/5edb2c4d0907578303560300.jpg

http://img1.sycdn.imooc.com//climg/5edb2c51096cb7cf02510347.jpg

从效果上看,因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠,所以两个盒子之间距离只有 100px,而不是 200px。如果想要避免外边距的重叠,可以将其放在不同的 BFC 容器中。

http://img1.sycdn.imooc.com//climg/5edb2cd30969471d03340445.jpg

(2)解决父级塌陷:

http://img1.sycdn.imooc.com//climg/5edb2d7d093be5a708290079.jpghttp://img1.sycdn.imooc.com//climg/5edb2d820906d7b003330140.jpg

由于容器内元素浮动,脱离了文档流,所以容器只剩下 2px 的边距高度。如果使触发容器的 BFC,那么容器将会包裹着浮动元素。

http://img1.sycdn.imooc.com//climg/5edb2da309cfb9d908720145.jpghttp://img1.sycdn.imooc.com//climg/5edb2dab095014c403780146.jpg

另,其他的方法同学可作为拓展知识,简单了解下就可以了。

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 提问者 Aurora_Meteor #1
    1、您的举例“overflow的去除边距重叠”中,说“两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) ”,body为什么会是BFC容器呢,它也没有设置那些能满足BFC的属性啊。 2、为什么解决边距重叠,要给父元素设置overflow才行,我试了一下把style标签里的p换为div就又是重叠了,这是为什么呢?overflow:hidden的原因吗?它是只对子元素有效?这个属性不是溢出隐藏么,在这里是特殊的作用效果?
    2020-06-06 14:20:37
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师