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布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别什么是文档流，以及如何脱离文档流，以及如何“解决”脱离文档流关于浮动的半脱离文档流的理解 float,absolute脱离文档流的总结 position属性脱离文档流覆盖其他内容 CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位 video标签播放视频禁止脱离文档流（转）CSS 浮动 -css中，文档流是什么？在css中会影响dom读取文档流的顺序的属性？