可不可以使用display来代替float呢?

可不可以使用display来代替float呢?

使用display还不需要考虑父元素坍塌问题

正在回答

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

2回答

你好同学,虽然可以使用display:inline-block实现像浮动一样的效果,但是并不能完全代替浮动。实际开发中一般使用浮动,原因如下:

1.inline-block设置成元素为行内块元素之后,会有行内元素的一个特殊现象,即html标签换行导致的默认间隙,可以写两个盒子测试一下:

元素设置成inline-block

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

如果使用浮动的话,浮动会让元素变成块元素,块元素是不存在这个特殊间隙的,如下:

元素设置浮动

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

2.浮动布局更加灵活,inline-block没有办法替代。例如一个盒子靠左排列,一个盒子靠右。此时盒子一个左浮动,一个右浮动就能轻松达到效果。使用inline-block实现不了效果哦。

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

祝学习愉快,望采纳。

  • 鲨鱼会飞 提问者 #1
    您好,为什么第三张图片中用inline-block无法实现呢?
    2019-07-31 14:41:39
好帮手慕夭夭 2019-07-31 19:14:36

你好同学,因为图3中有一个盒子靠左,一个盒子靠右。inline-block只是让盒子排列在一行显示。不能设置靠右(如果使用margin也只是让盒子与前一个盒子有间距,例如设置左间距300px,那么距离左侧永远是300px。当浏览器宽度变大的时候,距离右侧就比较远,所以没有办法实现靠右)。只有使用浮动,即右浮动(当然后期学习定位也可以设置靠右),才会让盒子靠右。所以浮动能够设置左浮动或者右浮动会比较灵活哦。

祝学习愉快,望采纳。

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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