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>