老师能否把这几种BFC常见形成条件举个应用的例子呢?这里的例子不太明白啊
这里给父元素直接设置overflow不就行了么,怎么img的同级元素也设置呢?
这是规定的应用方式吗,同级元素和父元素都需要设置一样的属性?那其他的几种BFC形成方式是不是也都要父元素和同级元素都设置一样的属性呢?麻烦老师每种形成方法举个简洁的例子,自己试的话感觉就算实现了BFC也会冗余一堆代码,想要简洁有效的实现代码条件
正在回答
同学你好,解答如下:
1、body 元素有 BFC 特性,这是现象,要记住;
2、两个p标签的边距造成了边框重叠现象。p外层再套一层标签 是为了让p标签放在不同的 BFC 容器中,这样就可以解决边框重叠的现象了。(可简单理解为,有BFC特性的div标签分开了两个p标签)你把p标签换成div标签,那么没有了BFC特性的标签的阻隔,所以两个div标签的边框重叠在一起了。
当overflow属性不是visible的时候,可以创建BFC,因此可以解决边框重叠的现象。
祝学习愉快~
同学你好,解答如下:
1、当p标签添加bfc类名的时候,p元素宽度从图片右侧开始,并不会和父容器宽度一致,会形成一个独立的bfc模块。
当不添加bfc类名的时候:
p元素宽度和父容器宽度一致,因为图片浮动脱离文档流,但是不脱离文本流,所以图片下方的位置,文字还是不能占据的,所以在右侧显示。
2、没有规定同级元素和父元素都需要设置一样的属性,要具体问题具体分析。
3、创建bfc的方法可以参考视频中老师列举出的几个(不过有一些使用频率不是很高):
在实际使用中,最最常用的就是overflow了,一般情景有:(1)overflow的去除边距重叠,如下:
从效果上看,因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠,所以两个盒子之间距离只有 100px,而不是 200px。如果想要避免外边距的重叠,可以将其放在不同的 BFC 容器中。
(2)解决父级塌陷:
由于容器内元素浮动,脱离了文档流,所以容器只剩下 2px 的边距高度。如果使触发容器的 BFC,那么容器将会包裹着浮动元素。
另,其他的方法同学可作为拓展知识,简单了解下就可以了。
如果我的回答帮到了你,欢迎采纳,祝学习愉快~
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理,通过ES6基础知识和前端主流高级框架的学习,助你快速构建企业级移动webAPP应用,进入职场的终极battle
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星