1.position为relative,absolute,fixed的元素
1.1 relative可以认为是半脱离,因为其在正常流中的位置仍然保留,但是定位后的位置是脱离文档流的,即可能遮挡其他元素
1.2 Absolute和fixed是完全脱离文档流,即文档没有给他们占位置,所以在这种定位的元素后增加的某些元素可能会被遮挡,当此定位元素的面积较大时,甚至可能出现后面的某些元素完全被遮挡,得到意外的效果。这种情况可以设置父元素为relative,并且设置宽高(如果不主动设置宽高,里面定位为absolute和fixed的元素并不会撑起元素的面积,如果全是这两种定位的子元素,那么父元素的面积为0*0)
2.float:left/right的元素
浮动的元素可以认为是半脱离的,其他元素遇到浮动的元素会忽略它的存在,即没有浮动元素时,它该在哪一行现在仍在哪一行(除非浮动元素或后面的元素宽度较长,导致换行),但是会把浮动元素的位置留出来,举例,
css样式设置引起的元素脱离正常文档流的情况
结果:
css样式设置引起的元素脱离正常文档流的情况

另外浮动的元素不会撑起其父元素的高度,如下图div.parent1有一个样式为float:left的子元素,该子元素有高度,但其父元素高度为0
css样式设置引起的元素脱离正常文档流的情况
css样式设置引起的元素脱离正常文档流的情况

所以当我们没有给父元素设置高度,而子元素又都是浮动元素时,就可能会使父元素的兄弟元素占领本该是父元素的位置,得到意外效果。

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-08-20
  • 2021-07-02
  • 2021-08-16
  • 2021-12-03
  • 2022-02-28
  • 2022-12-23
猜你喜欢
  • 2021-08-11
  • 2022-12-23
  • 2021-10-05
  • 2021-12-18
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案