css - 块元素设置relative后再添加float后的表现？

问题描述

问 题

各位大神：

如下两图及下方代码，对id为second的元素(蓝色)设置relative定位，表现如图1，原位置仍占有。

此时如果为这个元素增加 float：left, 发现绿色块会占据原空白位置，如图2，但是文字**(如果是其他内联元素也是一样的表现)**却会被撑下来...

苦思不得其解呀~~~

图1

图2

#first, #second, #ao {
  width: 100px;
  height: 100px;
}

#first {
  background: red;
}

#second {
  position: relative;
  float: left;
  top: -100px;
  left: 50px;
  background: blue;
}


#ao {
  background: green;
}


<div id="first">第一个</div>
<div id="second">第二个</div>
<div id="ao">我又被撑下来了</div>

解决方案

1.position:relative，设置了这个属性的元素只是相对于它原本的位置发生了相对位移，不会影响到其他元素的布局，所以图一你会看到结果就是除蓝色块按照设置的发生了位置偏移外其他元素没有变化；
2.float这个属性最开始设计的初衷是为了实现文字环绕效果，多说一句，设置了这个属性就不必再设置display:block了，（另div本身就是块级元素也不需要设置） 因为float特性就是块状化以及去空格化，且元素会脱离文档流，其他元素表现得好像它不存在一样，所以图二绿色块会上移，但是文字部分就如同刚才说的那样，会起到环绕的效果，解决办法就是清除浮动咯

这篇关于css - 块元素设置relative后再添加float后的表现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！