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


百度的時候有人說行內元素浮動之后會變成塊級元素,於是繼續在網上搜索,又有人說不加display:block就變不了會計元素;好的吧,實踐出結果,自己試試吧,個人總結了一下:

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

以sapn為實現對象,實驗代碼:

<!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>

效果圖:

 

給塊級元素設浮動的時候也是同樣的情況,屬性更加像是inline-block,只是父級的text-align:center是對會計元素沒有效果(ie高版本的會有效果),需要注意的是,設置浮動的元素是脫離文檔流的,因此會遮蓋未設置浮動的元素,以最典型的塊級元素div為例

代碼:

<!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>

效果圖

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM