1.span和div的区别1.span是行级元素，div是块级元素2.span占用的宽度是宽度的内容，而div默认是一行。所以一般在页面中，只有一行或者不到一行的文本使用span，当元素占据多行时，使用div。2.问题下图是预期的效果，div在两个span下，但是这样写的话，div和span的位置重叠了，因为span元素上设置了float属性，导致浮沉。解决方法是把span元素的高度计算出来，但是因为span元素是行级元素，不能设置高度，所以需要其他的解决方法。三。解决方案1.设置div的高度，使其起作用。2、设置div属性display，将div设置为display:inline-block，使其既具有块元素的特性，又具有内联元素不换行的特性。但是这对第二个span元素上设置的float:right属性无效，因为display:inline-block会让元素按行顺序排列，所以第二个span元素的float:right无效，为了达到想要的效果可以通过设置margin-left来实现。3、设置div属性overflow，将div设置overflow:hidden，形成一个BFC，可以自动计算div的高度，使其不与下面的div重叠。4、设置content属性position，将content设置为position:absolute，这样content会找到第一个position属性不是static的父元素，也就是html
，所以会相对于html<下移30px身体>。这种方式虽然也能解决问题，但是也会带来新的问题，因为position:absolute会导致内容元素脱离文档流。如果content元素下还有其他元素，其他元素的位置可能会和content元素重叠。比如，所以同样的问题又出现了，不推荐这种方法。4.总结当span和div同时使用，并且span元素上设置了float属性时，最好给span加一个div，使其成为块级元素，并设置高度，让后面的元素它不会受到影响。