Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

一. 什么是标准文档流

　　文本流其实就是文档的读取和输出顺序，也就是我们通常看到的由左到右、由上而下的读取和输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的，而float和position两个属性可以将元素从文本流脱离出来显示。

　　标准文档流的围观现象有3种:　　

　　1.空白折叠现象:多个空格或者换行会被折叠成一个.
　　2.高矮不齐,底边对齐.
　　3.自动换行,一行写不完,自动换行.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标准文档流</title>
    <style type="text/css">
        span{
            font-size: 50px;
        }
    </style>

</head>
<body>
    <!-- 文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。 -->
    <!-- 标准文档流的微观现象?
        1.空白折叠现象:多个空格或者换行会被折叠成一个.
        2.高矮不齐,底边对齐.
        3.自动换行,一行写不完,自动换行.


    -->
    <div>
        你好               你好




        你好
    </div>
    <div>
        你好好你好好你好好<span>姚明</span>好你好好你好好你好好你好好
    </div>
</body>
</html>

3种微观现象

二. 元素间转换

使用display:block,inline,inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级元素和行内元素转换</title>
    <style type="text/css">
        /*块状元素转换成行内元素*/
        .box1{
            display: inline;
            width: 200px;
            height: 30px;
            border: 3px solid red;
        }
        .box2{
            width: 200px;
            height: 30px;
            font-size: 30px;
            border: 3px solid green;
            margin-top: 10px;
        }
        /*行内元素转换成块级元素*/
        span{
            background-color: green;
            width:50px;
            margin-top:10px;
            display: block;
            /*隐藏标签,彻底的隐藏标签,原来标签的位置会被后面的内容覆盖掉,不占用原来的位置*/
            /*display: none;*/
            /*只隐藏标签内容,保留标签的区域大小,占用原来的位置.*/
            visibility: hidden;
        }
        /*块状元素转换成行内块元素*/
        /*.box3{
            display: inline-block;
            margin-top: 10px;
             200px;
            height: 30px;
            border: 3px solid red;
        }*/
    </style>
</head>
<body>
    <div class="box1">内容1</div>
    <div class="box1">内容1</div>
    <div class="box2">内容2</div>
    <div class="box3">内容3</div>
    <div class="box3">内容3</div>
    <div class="box3">内容3</div>
    <span>中国</span>
    <span>中国</span>
    <img src="./1.png" alt="">
    <img src="./1.png" alt="">
</body>
</html>

块级元素和行内元素转换

三. 浮动(float)

　　浮动是css布局中使用最多的属性!

　　定义:使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

　　浮动的实际用途，可设置文字环绕或使元素宽度由内容填充（类似Inline-block)。使用浮动需要注意的是如果浮动的元素高度比父级容器还高，那么需要设置父级容器的overflow属性为auto,使其自动撑满。

　　浮动的4个特点:　　　　

　　　　1.浮动元素的脱标
　　　　2.浮动元素的互相贴靠
　　　　3.浮动元素的"字围"效果
　　　　4.紧凑效果　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动介绍</title>
    <style type="text/css">
        *{
            border: 0;
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
            margin-left: 100px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            float: right;
            margin-right: 100px;
        }
    </style>
</head>
<body>
    <!--浮动是布局中用的最多的一个属性. 
        浮动效果:两个元素并排了,且可以设置宽高.
        浮动的三个特点:
                    1.浮动元素的脱标
                    2.浮动元素的互相贴靠
                    3.浮动元素的"字围"效果
                    4.紧凑效果
         -->
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

浮动小例子

浮动布局：
- float:left/right；
- 特点：
  - 元素浮动之后不占据原来的位置（脱标）；
  - 浮动的盒子在一行上显示；
  - 行内元素浮动之后转换为行内块元素（不推荐使用，转行内块元素最好使用display:inline-block）；
- 浮动的作用：
  - 文本绕图（文字环绕图片）：文字和浮动元素没有层叠关系，文字不参与浮动；
  - 制作导航；
  - 网页布局；

　　清除浮动

清除浮动不是不使用浮动，而是清除浮动所产生的不良影响（当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误），清除浮动使用关键字clear:left/right/both;,工作中使用的最多的是clear:both;；
清除浮动方法：
1. 额外标签法(内墙法)：在最后一个浮动元素后添加标签：<div style="clear:both"></div>,但是工作中一般不使用这样的方法；
2. 给父级元素使用overflow:hidden（bfc），有弊端：当内容出了盒子，就会被裁剪掉；详细介绍:W3C之overflow
3. 伪元素清除浮动，使用最多，最完美：
4. 给父元素设置高度(一般不使用)

　清除浮动例子:其中overflow和after经常用.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内墙法</title>
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    ul{
        list-style: none;
    }
    /*父盒子不设置高度.和父盒子统计的盒子会顶边显示.*/
    div{
        width: 400px;
        /*给父盒子设置高度,即可解决一些浮动带来的问题.*/
        /*height: 40px;*/
    }
    div ul li{
        float: left;
        height: 40px;
        width: 100px;
        background-color: green;
    }
    .box{
        width: 500px;
        height: 100px;
        background-color: pink;
    }
    .clear{
        clear: both;
    }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>python</li>
            <li>web</li>
            <li>linux</li>
            <!-- 给浮动元素最后面添加一个空的div并且该div不浮动.然后设置css属性clear:both,就可以清除别的标签对本身的浮动影响.此方法又名 内墙法.
            缺点:每个清除浮动的标签都要添加一个空的div,代码太冗余了. -->
            <div class="clear"></div>
        </ul>

    </div>
    
     <div class="box">
            
    </div>
</body>
</html>

内墙法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overflow方法</title>
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    ul{
        list-style: none;
    }
    /*父盒子不设置高度.和父盒子统计的盒子会顶边显示.*/
    .box{
        width: 400px;
        /*overflow:hidden方法*/
        overflow: hidden;
        /*给父盒子设置高度,即可解决一些浮动带来的问题.*/
        /*height: 40px;*/
    }
    .box ul li{
        float: left;
        height: 40px;
        width: 100px;
        background-color: green;
    }
    .box2{
        width: 500px;
        height: 100px;
        background-color: pink;
    }

    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>python</li>
            <li>web</li>
            <li>linux</li>
            
        </ul>

    </div>
    
     <div class="box2">
            
    </div>
</body>
</html>

overflow方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素法</title>
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    ul{
        list-style: none;
    }
    /*父盒子不设置高度.和父盒子统计的盒子会顶边显示.*/
    div{
        width: 400px;
    }
    div ul li{
        float: left;
        height: 40px;
        width: 100px;
        background-color: green;
    }
    .box{
        width: 500px;
        height: 100px;
        background-color: pink;
    }
    .clearfix:after{
        /*下面3句是after方法清除浮动必须写的*/
        content: ".";
        clear: both;
        display: block;
        /*content有内容"."时,也可以写成5句*/
        height: 0;
        visibility: hidden;
    }

    </style>
</head>
<body>
    <div class="clearfix">
        <ul>
            <li>python</li>
            <li>web</li>
            <li>linux</li>
        
        </ul>

    </div>
    
     <div class="box">
            
    </div>
</body>
</html>

伪元素after清除法

四. margin塌陷

　　什么是margin塌陷?

　　当2个同级盒子,设置垂直方向上的margin,以较大的那个为准.这就称为塌陷.
　　注意:浮动的同级盒子不塌陷.
　　注意:同级盒子,左右不塌陷.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin的塌陷</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 300px;
            height: 200px;
            margin-bottom: 20px;            
            background-color: red;
        }
        /* box1和box2形成了塌陷,此时他俩的上下间距是50px */
        .box2{
            width: 400px;
            height: 200px;
            margin-top: 50px;
            background-color: green;
        }
        span{
            background-color: greenyellow;
        }
        span.a{
            margin-right: 20px;
        }
        span.b{
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div class="father">
            <!-- 当2个同级盒子,设置垂直方向上的margin,以较大的那个为准.这就称为塌陷.
                注意:浮动的同级盒子不塌陷.
                注意:同级盒子,左右不塌陷.
         -->
        <div class="box1"></div>
        <div class="box2"></div>

        <span class="a">内容</span>
        <span class="b">内容</span>
    </div>
</body>
</html>

margin塌陷例子