html——影响文档流属性详解

下面哪个属性不会让 div 脱离文档流（normal flow）？

position: absolute;

position: fixed;

position: relative;

float: left;

答案为c

有些人不太理解自己太误人子弟，网上摘抄了下供大家参考。

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。【 脱离文档流即是元素打乱了这个排列】 ， 或是从排版中拿走 。

所以我们可以知道，除了 position: absolute;和 position: fixed;会直接将元素从排版中拿走从而脱离文档流之外，设置float对象也会 “打乱这个排列”从而也被称为脱离文档流。

float：right 显然就打乱了从左到右的文档流排列，而为什么说float：left也会脱离文档流呢？

我的理解是当子元素设置了float属性而父元素没有设置（或保持默认的 position:static ），则子元素会从父元素中溢出（即父元素不会根据子元素的大小进行扩大），因为当元素设置了float属性之后，其他没有设置float属性的盒子会无视这个元素，即文档流下面的没有设置浮动的元素会何其进行叠加。即可以当作其脱离了文档流，但需要注意的是，其与position：absolute不同的是，其他盒子元素内的文本依然会为float元素让出位置，围绕在周围，所以不会看到文本相互叠加的情况，而absolute定位的元素则会出现文本叠加。所以亦可以理解为脱离了文档流，这种情况通常消除浮动就可以解决。

简单的界面就是

<div class=“list2”>



    <ul class=“list-ul”>




        <li ><a href=“/”>HOME</a></li>




        <li ><a href=“/visit/”>VISIT</a></li>




        <li><a href=“/exhibitions/”>EXHIBITIONS</a></li>




        <li ><a href=“/collections/”>COLLECTIONS</a></li>




        <li><a href=“/multimedia/”>MULTIMEDIA</a></li>




        <li><a href=“/EXPLORE/”>EXPLORE</a></li>




        <li ><a href=“/about/”>ABOUT</a></li>




    </ul>




</div>




<div class=“div2”>div1</div>





<div class=“div3”>div2</div>

一、设置float属性的父元素没有高度

/*list2*/




.list2 {



    margin: 10px auto;



    float: left;







}








.list2 ul {







    margin: 0;



    text-align: center;



}








.list2 ul li {



    float: left;



}

高度为0.

二、设置float后面的元素，

.list2 {



    margin: 10px auto;



    float: left;



}








.list2 ul {







    margin: 0;



    text-align: center;



}








.list2 ul li {



    float: left;



    width:100px;



}




.div2{







}




.div3{







}

设置float后的hahahahah占用了他的位置，但是并没有重叠。

三、float的连续性

.list2 {



    margin: 10px auto;







}








.list2 ul {







    margin: 0;



    text-align: center;



}








.list2 ul li {



    float: left;



    width:100px;



}




.div2{



    clear: both;



    float: left;



}




.div3{







}

特别有意思，div1下来了，div2还在上面，继续原来的float元素继续排列。

        </div>
            </div>