CSS 脫離文檔流

本文轉載自查看原文 2019-02-12 10:32 678 前端開發

　　1.脫離文檔流

　　　　目前我知道的是有三種方式來使標簽脫離文檔流

　　　　　　（1）浮動

　　　　　　（2）固定定位

　　　　　　（3）絕對定位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>脫離文檔流的情況</title>

    <style>
        .c1 {
            height: 100px;
            width: 100px;
            background-color: red;
            /*float: right;*/
        }

        .c2 {
            height: 100px;
            width: 100px;
            background-color: black;
            /*float: right;   !* 浮動會使標簽脫離文檔流，使得C3標簽向上頂在了C2浮動前的位置 *!*/
            /*position: absolute; !* 絕對定位也會導致標簽脫離文檔流 *!*/
            /*left: 400px;*/
            position: fixed;    /* 固定定位也會導致標簽脫離文檔流 */
            right: 100px;


        }

        .c3 {
            height: 200px;
            width: 200px;
            background-color: green;
        }
    </style>

</head>
<body>

<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>



</body>
</html>

免責聲明！

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

猜您在找 css脫離文檔流 CSS脫離文檔流&浮動 html/css 關於脫離文檔流的幾種情況 css中哪些屬性會脫離文檔流 CSS布局之脫離文檔流詳解——浮動、絕對定位脫離文檔流的區別 CSS布局之脫離文檔流詳解——浮動、絕對定位脫離文檔流的區別脫離文檔流分析關於css浮動框是否脫離文檔流的分析什么是文檔流，以及如何脫離文檔流，以及如何“解決”脫離文檔流脫離文檔流和恢復文檔流的方法