CSS 脱离文档流

Myth丶恋晨 2021-09-20 12:14 423阅读 0赞

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>

转载于:https://www.cnblogs.com/whylinux/p/10364186.html

发表评论取消回复

表情：

评论列表（有 0 条评论，423人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS标准文档流

标准文档流标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。 HTML就是一种

落日映苍穹つ/ 2023年01月07日 12:27/ 0 赞/ 148 阅读

相关 CSS标准文档流与脱离文档流

标准文档流文档流：指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。标准流

曾经终败给现在/ 2023年01月05日 03:57/ 0 赞/ 131 阅读

相关 CSS使用display:incline与float:left的区别：脱离文档流参差不齐

脱离文档流对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果

亦凉/ 2022年12月10日 07:14/ 0 赞/ 134 阅读

相关 css中元素脱离文档流后呈现特点？

通过设置浮动等方式而脱离文档流的元素，其特点也会发生变化，具体如下：块级元素块元素不再独占页面一行块元素的高度和宽度都会被内容撑开行内元素

忘是亡心i/ 2022年10月08日 05:59/ 0 赞/ 179 阅读

相关前端---CSS文档流

CSS的定位机制有3种: 普通流浮动(float : left / right / none) 和定位(position : static / relative

小灰灰/ 2022年07月24日 07:10/ 0 赞/ 175 阅读

相关 CSS之文档流

[文档流][Link 1] 写html，css的同学应该需要清楚什么是文档流。文档流：将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流。

小咪咪/ 2022年06月08日 14:58/ 0 赞/ 275 阅读

相关 HTML脱离文档流的三种方法

一、什么是文档流？将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用

以你之姓@/ 2022年05月29日 04:07/ 0 赞/ 376 阅读

相关 CSS 文档流，定位

https://blog.csdn.net/qq\_35518293/article/details/77878512 没怎么系统学过html和css,有概念上的东西不清楚.

梦里梦外;/ 2022年05月25日 13:15/ 0 赞/ 205 阅读

相关 float探索，脱离文档流？不脱离文档流？

float属性是css2中的一个属性，很多时候我们都会用到她，但是通常只要一不小心就会遇到很多问题，跟设想的完全不一样呀，怎么回事？？？那么这个时候我们应该冷静下来好好探索一下

我会带着你远行/ 2022年05月09日 01:06/ 0 赞/ 275 阅读

相关 CSS 脱离文档流

　　1.脱离文档流　　　　目前我知道的是有三种方式来使标签脱离文档流　　　　　　（1）浮动　　　　　　（2）固定定位　　　　　　（3）绝对定位　　

Myth丶恋晨/ 2021年09月20日 12:14/ 0 赞/ 424 阅读