既然BFC能清除浮动,那么清除浮动的方法中怎么只有一条能形成BFC?

既然BFC能清除浮动,那么清除浮动的方法中怎么只有一条能形成BFC?

我感觉BFC与清除浮动之间我有些乱

正在回答

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

1回答

同学你好,BFC可以清除浮动,是因为具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素。

视频中老师所讲的清除浮动的方法中,只有overflow: hidden 方式是可以形成BFC的,例如:以下代码中,由于容器内元素浮动,脱离了文档流,所以容器只剩下 2px 的边距高度,如图

http://img1.sycdn.imooc.com//climg/60a7258d0951778906970359.jpg

如果使用overflow:hidden方式触发容器的BFC,那么容器将会变成一个封闭的大盒子包裹住浮动元素,如图

http://img1.sycdn.imooc.com//climg/60a725ba09fddc4007030090.jpg

http://img1.sycdn.imooc.com//climg/60a725ba09d88e5c06360255.jpg


视频中其他清除浮动的方式,一般是给元素设置clear:both属性,clear属性是通过清除相邻的浮动元素对自己的影响来达到清除浮动的目的,而不是形成BFC来清除浮动的。

祝学习愉快!

  • overgrown 提问者 #1

    可是形成BFC的除了overflow还有三种,为什么他们不能用于清除浮动呢?

    2021-05-21 11:46:44
  • 好帮手慕然然 回复 提问者 overgrown #2

    同学你好,形成BFC的其他方式也是可以用于清除浮动的,只是需要根据不同的情况选择合适的方式:

    1、对于给元素设置float值不为none, 这种方式也会使父元素发生浮动,脱离文档流

    2、对于给元素设置position值不为relative和static,这种方式会使父元素脱离标准流,也不会占用位置

    3、对于给元素设置display:inline-block/table-cell, 这种方式不常用

    4、对于给元素设置overflow值不为visible,如果值设为scroll的话,页面会出现滚动条

    所以综上所述,overflow:hidden是最常用于形成BFC来实现清除浮动的方法,但是也要在不会隐藏子元素内容的情况下使用。

    祝学习愉快!

    2021-05-21 14:50:38
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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