行內元素和塊級元素使用浮動後的變化

百度的時候有人說行內元素浮動以後會變成塊級元素，因而繼續在網上搜索，又有人說不加display：block就變不了會計元素；好的吧，實踐出結果，本身試試吧，我的總結了一下：html

行內元素設置成浮動以後變得更加像是inline-block（行內塊級元素，設置成這個屬性的元素會同時擁有行內和塊級的特性，最明顯的不一樣是它的默認寬度不是100%），這時候給行內元素設置padding-top和padding-bottom或者width、height都是有效果的spa

以sapn爲實現對象，實驗代碼：3d

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="width:600px; height:600px; background-color: #d03642;margin:50px auto;text-align: center">
    <!--左浮動-->
    <span style="color:#fff;font-size: 30px; height:50px;padding:30px;width: 100px; background-color: lightseagreen;float: left">左浮動</span>
    <!--未設置浮動（父級設置了text-align:center）-->
    <span style="color:#fff;font-size: 30px; height:50px;padding:30px;width: 100px; background-color: lightseagreen">無浮動</span>
    <!--右浮動-->
    <span style="color:#fff;font-size: 30px; height:50px;padding:30px;width: 100px; background-color: lightseagreen;float: right;">右浮動</span>
</div>
</body>
</html>

效果圖：code

給塊級元素設浮動的時候也是一樣的狀況，屬性更加像是inline-block，只是父級的text-align:center是對會計元素沒有效果（ie高版本的會有效果），須要注意的是，設置浮動的元素是脫離文檔流的，所以會遮蓋未設置浮動的元素，以最典型的塊級元素div爲例htm

代碼：對象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="width:600px; height:600px; background-color: #d03642;margin:50px auto;text-align: center">
    <!--左浮動-->
    <div style="color:#fff;font-size: 30px; height:50px;padding:30px; background-color: lightseagreen;float: left">左浮動</div>
    <!--未設置浮動-->
    <div style="color:#fff;font-size: 30px; height:100px;padding:30px;width: 150px; background-color: blanchedalmond;border:1px solid green">無浮動</div>
</div>
</body>
</html>

效果圖blog