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;

            width: 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塌陷例子