Question

行内元素为什么要float之后border才能包裹整个元素？

比如：
<span id="span1">asfdsa afsdfaf afasdfasf adfasdfaf adfasdfa fafad adfdasdf adfdafa asfdsa afsdfaf afasdfasf adfasdfaf adfasdfa fafad adfdasdf adfdafa asfdsa afsdfaf afasdfasf adfasdfaf adfasdfa fafad adfdasdf adfdafa asfdsa afsdfaf afasdfasf adfasdfaf adfasdfa fafad adfdasdf adfdafa asfdsa afsdfaf afasdfasf adfasdfaf adfasdfa fafad adfdasdf adfdafa asfdsa afsdfaf afasdfasf adfasdfaf adfasdfa fafad adfdasdf adfdafa </span>
默认的这个span会铺满整个屏幕。这貌似和行内元素的属性不符合，因为不是说行内元素都是不会占据一行的吗？看来行内元素只要内容许可，还是会首先考虑铺满整行的。
问题是，当我们把span加上border的时候，发现border并不能包裹整个元素，然后试着把span float right之后，发现border是可以完全包裹了，但是这个是为什么呢？还有，为什么float之后，这个spa标签没有看上去浮动到一边呢，任然是占据整个屏幕？

---
请教浮动让行内元素变成了区块元素或者display inline-block,

Answer 1

　　这位网友你好，span为行内元素，也就是内联元素，默认是不具有宽度高度属性的，它的大小会随内容多少而变化，如果你的内容多，比如你写的asfds已经够长，占据整行了，那么span标签当然会占据整行，你说默认会铺满整个屏幕那是不可能的，你可能设置了使其成为块级元素的属性。
　　再来说float的事，如果一个元素被设置为float之后，那么它默认会添加属性display:inline-bolock，也就是说浮动会让元素变为拥有块级属性的行内元素。

追问

display inline block　和 dispaly block 有什么区别吗？　有的人说是浮动让元素称为块状元素。请教　谢谢您的回答。

追答

　　display:inline-block;设置为这个属性的元素会有宽度高度等块级元素的属性，但是它又不单独占据一行，所以同时拥有内联元素的属性。
　　而设置为display:block;的元素会单独占据一行，同时能设置其宽度和高度等属性。
　　PS：display:block;块级元素之所以会单独占据一行是因为它们前后默认有换行符（看不到）。