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>