内联元素和块级元素的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

猜你喜欢

转载自blog.csdn.net/CWH0908/article/details/89407061
今日推荐