本文共 2159 字，大约阅读时间需要 7 分钟。

---

本人是个新手，写下博客用于自我复习、自我总结。

如有错误之处，请各位大佬指出。

学习资料来源于：尚硅谷

---

文档流（normal flow）

• 网页是一个多层的结构，一层摞着一层。将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。
• 通过CSS可以分别为每一层来设置样式
• 作为用户来讲只能看到最顶上一层
• 这些层中，最底下的一层称为文档流，文档流是网页的基础。我们所创建的元素默认都是在文档流中进行排列
• 对于我们来元素主要有两个状态：在文档流中、不在文档流中（脱离文档流）
• 也就是说在文档流中元素默认会紧贴到上一个元素的右边，如果右边不足以放下元素，元素则会另起一行，在新的一行中继续从左至右摆放。这样一来每一个块元素都会另起一行，那么我们如果想在文档流中进行布局就会变得比较麻烦。

元素在文档流中有什么特点：

块元素

- 块元素会在页面中独占一行(自上向下垂直排列) - 默认宽度是父元素的全部（会把父元素撑满） - 默认高度是被内容撑开（子元素）

行内元素

- 行内元素不会独占页面的一行，只占自身的大小 - 行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列 - 行内元素的默认宽度和高度都是被内容撑开

例：

    
       
       
                
   
    我是div1
   
     
   
    我是div2
   
     我是span1     我是span2     我是span2     我是span2     我是span2     我是span2     我是span2     我是span2     我是span2     我是span2

---

浮动 ※

• 所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。

• 浮动使用float属性。 • 可选值： – none：不浮动 – left：向左浮动 – right：向右浮动 • 块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一个块级元素。 • 当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元素时我们都会为其指定一个宽度。

• 当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕在元素的周围。

• 浮动会使元素完全脱离文本流，也就是不再在文档中占用位置。 • 元素设置浮动以后，会一直向上漂浮直到遇到父元素的边界或者其他浮动元素。 • 元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度。也就是浮动元素不会撑开父元素。 • 浮动元素默认会变为块元素，即使设置display:inline以后其依然是个块元素。

例：

效果图：

---

浮动其他的特点

    
       
       
               
   
    
        在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。    
    我是一个span    
   
    helloaaaaa
   
     
   
    hello
   
     

---

网页的布局

    
       
       
               
       
   
    
       
   
        
           
           
           
    
     2
    
       
           
        
   
        
       
   

---

高度塌陷的问题 ※

---

BFC 块级格式化上下文 ※

---

清除浮动 clear ※

• clear属性可以用于清除元素周围的浮动对元素的影响。

• 也就是元素不会因为上方出现了浮动元素而改变位置。 • 可选值： – left：忽略左侧浮动 – right：忽略右侧浮动 – both：忽略全部浮动 – none：不忽略浮动，默认值

例：

    
       
       
               
   
    1
   
    
   
    2
   
    
   
    3
   
     

---

高度塌陷的最终解决方案 ※

---

clearfix ※

通过浮动，我们已经可以让子元素在父元素内移动，所以接下来就需要知道如何定位。

转载地址：http://uoyki.baihongyu.com/