浮动元素性质 · css3

1.浮动的元素脱标标准流元素是区分行，块我们知道了浮动元素是脱离标准流的，那么脱离标准流后，浮动元素有哪些特性？答:浮动元素，脱离标准流后，既可以设置宽度和高度，也可以实现并排显示，不区分元状态，也就是不区分行内元素和块级元素如果此时P标签和span标签都设置了高度宽度，但是由于元素类型的限制，span标签没有宽度和高度代码如下： ``` <style> *{ margin: 0; padding: 0; } div{ width:200px; height:200px; border: 1px solid red; } div p{ width:100px ; height:100px; background-color:chartreuse; } div span{ width:100px ; height:100px; background-color:cornflowerblue; } </style> </head> <body> <div> <p></p> <span>这是一个文字</span> </div> ``` 效果图如下： ![](https://img.kancloud.cn/bd/49/bd49ee2c340ac134b5220daef98c8b0d_1044x501.png) <p style="color:red">在标准流下给p和span设置了宽高一点用也没有</p> ``` *{ margin: 0; padding: 0; } div{ width:200px; height:200px; border: 1px solid red; } div p{ width:100px ; height:100px; background-color:chartreuse; float:left; } div span{ width:100px ; height:100px; background-color:cornflowerblue; float:left; } </style> </head> <body> <div> <p></p> <span>这是一个文字</span> </div> ``` 添加float浮动标签后span也一起浮动了 ![](https://img.kancloud.cn/76/23/7623405be41487ae33d2787378d0262f_956x512.png) <p style="color:red">在float浮动下给p和span设置了宽高就开始浮动，并排在一起了</p>