在学校里学不到的知识：position: absolute;和float浮动可以直接变成行内块元素

我是一名web小白，目前现在是一名初中生，这是我第一次写博客，目前，我也是正在自学web前端。这是我对定位和浮动元素的个人看法，请大家在品论去建议建议，我以后会更努力的。我也不会什么写作文，布局之类的，请大家见解！

行内元素

什么是行内元素呢？
1.无法设置width和height。
2.只对margin属性left和right有效，top和bottom无效。对padding的上下左右都有效
3.不能独占一行。
我们可以用css属性中的display：inline；来转换成行内元素

行内元素的标签有哪些？

span，b，i，sub，sup，a，strong，img，input等。

块元素

什么是块元素呢？
1.可以设置width和height。
2.margin属性的上下左右都有效，padding属性的上下左右也是都有效。
3.独占一行的。
我们可以用css中的display：block属性来转换成块级元素。

块元素的标签有哪些？

我们最常见的div，p，ul，li，h1到h6，hr，from表单等。

行内块元素

什么是行内块元素呢？
1.可以设置width和height。
2.不独占一行。
我们可以用css中的display：inline-block属性来转换成行内块元素。

已经跟你们说了什么是行内元素，块元素和行内块元素，接下来就可以说浮动和position：absoulte来变成行内块元素。

<span class="span1">我是个span行内元素</span>
<div class="div1">我是div块元素</div>

.span1{
            width: 100px;
            height: 100px;
      		background-color: red;
      	}
 .div1 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }

因为div是一个块元素，他需要独占一行，所以没有在span后边。
此时我们对span元素设置的width和height都没有生效。

接下来我们改变css一下代码。

.span1{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .div1 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }

此时span元素width和height的属性生效了，形成了行内块元素。给span元素定位属性时，span元素脱离了文档流，所以div元素会上去，此时span元素覆盖在div元素上边。

接下来我们去试一下加浮动会不会是一样的效果。

结果是一样的，变成了行内块元素，仔细的人应该都开出来了，他的文字变了，这种情况我就想问下大家为什么它的文字会环绕这个span元素呢？

那我就跟大家讲一下浮动属性吧，其实最初的浮动属性用的是图像，出现浮动的目的就是让文本环绕图像，后来css就允许用于其他元素了。

有许多小伙伴用了浮动或是position：absolute属性后，他的页面效果就不是想像的那样了，很着急，也找不出错误，看了我这篇文章就知道自己的错误了吧。

感谢大家的阅读，多点点赞，支持支持我，这是我的第一篇文章。
有兴趣的也可以加Q群1056384633可以讨论讨论。