内联元素和块级元素的float属性区别

float:

设置了float浮动元素会脱离文档流 即从页面普通的布局排版中脱离,其他盒子元素会当这个float浮动元素不存在而进行定位。但是文本元素却会重视它,因此形成了文本环绕效果。

所以我们可以理解为当元素设置了float浮动,则该元素脱离了文档流却没有脱离文本流。因此我们也可以称之为半脱离文档流。

设置了position:absolute的元素则完全脱离了文档流。其他任何盒子元素、文本元素和盒子内的文本元素都将无视它进行定位。


原文地址:https://blog.csdn.net/gg654304469/article/details/65638723 


内联元素浮动:(display:inline;——>display:inline-block;)

      当内联元素的display不等于none引起对象浮动时,内联元素将被视作块对象,那为什么不直接display:inline-block;因为在ie6下有几个px的bug,所以内联元素浮动时是display:inline-block;。float在绝对定位和display为none时不会被应用

块级元素浮动:(display:block;——>display:inline-block;)

width:

  1. 块级元素的默认宽度是width:auto;意思是自动调整宽度
  2. 在不带float的情况下,块级元素的宽度会自动调整至最大化
  3. 在带float的情况下则正好相反,它会自动调整至最小化

height:

  1. 块级元素的默认高度也是height:auto.
  2. 带不带float的块级元素都一样,都是自动调整至最小化

原文地址:https://blog.csdn.net/tt_twilight/article/details/72804104

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值