浮動元素性質 · 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>