CSS—网页布局，标准流，浮动流

　　1、什么是网页布局方式 ？

　　布局可以理解为排版，我们所熟知的文本编辑类工具都有自己的排版方式，比如word，nodpad++等等
　　而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的
  2、网页布局/排版的三种方式
标准流
  浮动流
  定位流

二、标准流

标准流的排版方式，又称为：文档流/普通流，所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
#   1 浏览器默认的排版方式就是标准流排版方式

#   2 在CSS中将元素分为三类：分别是
        块级
        行内
        行内块级

#  3 在标准流中有两种排版方式，一种是垂直排版，一种是水平排版

        垂直排版，如果元素是块级元素，那么就会垂直排版
        水平排版，如果元素是行内元素或行内块级元素，那么就会水平排版

三、浮动流

　　浮动流是一种半脱离标准流的排版方式

1、脱离文档流

1、 什么是脱离文档流？
    （1）浮动元素脱离文档流意味着
          不再区分行内、块级、行内块级，无论是什么级的元素都可以水平排版
          无论是什么级的元素都可以设置宽高
综上所述，浮动流中的元素和标准流总的行内块级元素很像
     （2）浮动元素脱标文档流意味着
            当某一个元素浮动走之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标
            如果前面一个元素浮动走了，而后面一个元素没有浮动，那么垂直方向的元素会自动填充，浮动元素重新归位后就会覆盖该元素

2、注意点：

　　（1）浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐，没有居中对齐，也就是没有center这个取值

 　  （2）一旦使用了浮动流，则margin:0 auto;失效
ps:让两个元素显示到一行，有两种实现方式，一种是修改元素的显示方式为inline-block，另外一种就是用浮动的方式

2、半脱离文档流

1、什么是半脱离文档流？
脱离分为：半脱离与完全脱离，

其中完全脱离指的是元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样

而之所以称为半脱离：是因为浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置，跟标准流还是有一定的关系，比如说浮动的元素在浮动之前处于标准流的第二行，那么他浮动之后也是处于浮动流的第二行，不会去找其他行的浮动元素去贴靠，打一个比方就是：浮动流就是在标准流上面覆盖的一层透明薄膜，元素浮动之后就会被从标准流中扔到浮动流这个薄膜上，他在这个薄膜上的位置还是以前在标准流的位置上找同方向的浮动元素进行贴靠，贴靠的准则就是：

（1）同一个方向上谁先浮动，谁在前面

（2）不同方向上左浮动找左浮动，右浮动找右浮动

ps:(1)浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置
     (2)同一个方向上谁先浮动，谁在前面
     (3)不同方向上左浮动找左浮动，右浮动找右浮动

3、浮动元素贴靠问题

当父元素的宽度足够显示所有元素时，浮动的元素就会并列显示
当父元素的宽度不足够显示所有元素时，浮动的元素就贴前一个元素，如果还不够，就会再贴前一个元素
直到贴到父元素左边，此时无论是否宽度足够都会在这一行显示了

4、浮动元素字围现象

没有浮动文字、图片、超链接等元素会给浮动的元素让位置，并围绕在浮动元素的周围 
ps:只要是行内块级元素，都会有字围效果

5、浮动流排版练习

#注意：在企业开发中，如何对网页进行布局
#1、垂直方向的布局用标准流布局，水平方向用浮动流布局
#2、从上至下布局
#3、从外向内布局
#4、水平方向可以先划分为一左一右再对左边后者右边进一步布局

6、浮动元素高度问题(又称父级塌陷)

#1、在标准流中,内容的高度可以撑起父元素的高度
#2、在浮动流中,浮动的元素是不可以撑起父元素的高度的，当子元素都浮动起来后，父亲的内容高度即height变为0，父元素就好像塌陷了一样，因而又称为父级塌陷

7、清除浮动

四、定位流