您现在的位置是:首页 > 学无止境> 程序人生网站首页慢生活

脱离文档流和恢复文档流的方法

张帅2019-12-09 752人围观
简介 将窗体自上而下 分成一行一行,并在每行中按照从左到右依次排放元素,称为文档流(normal stream又称普通流) 在html 中,html元素都是盒模型,盒子模型占用一定的空间,依次排放在html 中,形成了文档流。

一、文档流

1. 什么是文档流?

将窗体自上而下 分成一行一行,并在每行中按照从左到右依次排放元素,称为文档流(normal stream又称普通流)

在html 中,html元素都是盒模型,盒子模型占用一定的空间,依次排放在html 中,形成了文档流。


2. 什么是脱离文档流

元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方)。

脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。


二、怎么脱离文档流

1. float

一个元素浮动时,其他内容会“环绕”该元素。(权威指南P289)


2. position

a. position:absolute

绝对定位,absolute脱离文档流后的元素,是相对于该元素的父类(及以上,如果直系父类元素不满足条件则继续向上查询)元素进行定位的,并且这个父类元素的position必须是非static定位的(static是默认定位方式)。

当父级元素的position全是static的时候,absolute是相对于html来进行定位的。


注意:绝对定位的窗口一般都要设置相对距离,当你同时设置top和bottom的时候,只有top会生效,同理,同时设置left和right的时候,只有left会生效。


b. position:fixed

固定定位,完全脱离文档流,相对于浏览器窗口进行定位。(相对于浏览器窗口就是相对于html)。


c. position:relative

相对定位,元素框偏移某个位置,元素保持未定位前的形状,他原本所占的空间保留


三、怎么恢复文档流

1. 对于float 的元素,对父级元素可以使用overflow:hidden

2. clear:both

对子元素使用clear

我对两个盒子都进行浮动,并且都设置了clear:both 结果如下:


 <style>

    *{padding: 0;margin: 0;}

    .box{

        border: 5px solid yellowgreen;

    }

    .box1,.box2{width: 100px;height: 100px;background-color: darkcyan; border: 1px solid black;}

    .box1,.box2{float: left;clear:both}

    

    </style>

</head>

<body>

    <div class="box">

        <div class="box1">1</div>

        <div class="box2">2</div>

    </div>


对父元素使用clear


<style>

    *{padding: 0;margin: 0;}

    .box{

        border: 5px solid yellowgreen;clear:both;

    }

    .box1,.box2{width: 100px;height: 100px;background-color: darkcyan; border: 1px solid black;}

    .box1,.box2{float: left;}

    

    </style>


上面的浮动,下面的清除时

上面的浮动时


可以恢复


 <style>

    *{padding: 0;margin: 0;}

    .box{

        border: 5px solid yellowgreen;

    }

    .box1,.box2{width: 100px;height: 100px;background-color: darkcyan; border: 1px solid black;}

    .box1{float: left;}

    .box2{clear:both;}

    

    </style>


下面的浮动,上面的清除时

下面的浮动时:


不可以恢复


一边浮动一边清除,这样是不可以的

(看到这篇文章的小伙伴可以留言,目前我只记得这一种方法)

总结一下


如何解决浮动布局导致的父元素高度塌陷问题?

在浮动元素的后面再添加高度为0一个div,并且让他清除浮动 clear:both

给父元素设置overflow:hidden;

给父元素设置display:inline-block; (会包裹子元素)

给父元素设置一个伪类

.box:after{

        content: "";

        display: block;

        clear: both;

    }


或者下面这种:


.box:after{

        content: ".";

        display: block;

        clear: both;

        height: 0;//使父元素不会被.撑出来

       overflow: hidden;  //使.隐藏

    }



文章评论

    已有 3 条评论

    TheBaiRuo

    名称:妙笔生花
    简介:一生很长,会遇见很多出现在你生命中的过客!
    网址: https://blog.zh66.club
    LOGO:http://blog.zh66.club/usr/themes/Miracles/favicon.ico

    妙笔生花 2019-11-01 14:44

    TheBaiRuo

    名称:皮皮家园
    简介:要让平凡的每一天,变得不再平凡!
    网址: https://www.zh66.club
    LOGO:https://cdn.jsdelivr.net/gh/Zevs6/CDN@3.0/img/avatar.jpg

    皮皮家园 2019-11-01 20:44

    admin

    小伙伴们快来评论留言吧!

    admin 2019-11-01 11:15

    添加新评论