文档流

文档流指的是文档中可现实的对象在排列时所占用的位置。
将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。
也就是说在文档流中元素默认会紧贴到上一个元素的右边，如果右边不足以放下元素，元素则会另起一行，在新的一行中继续从左至右摆放。
这样一来每一个块元素都会另起一行，那么我们如果想在文档流中进行布局就会变得比较麻烦。
块元素在文档流中会独占一行

浮动

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

浮动使用float属性

可选值
none：不浮动
left：向左浮动
right：向右浮动

这里要注意的是：一用浮动，所有的元素都会成为一个块级元素

当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元素时我们都会为其指定一个宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        .box1{
            /*display: inline-block;*/
            width: 100px;
            height: 100px;
            background-color:red;
            /*float:right;*/
            float:left;
        }
        .box2{
            /*display: inline-block;*/
            width: 100px;
            height: 100px;
            background-color:yellow;
            /*float:right;*/
            float:left;
        }
        .box3{
            /*display: inline-block;*/
            width: 100px;
            height: 100px;
            background-color:green;
            float:left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

在上面的代码中，大家可以取消浮动float然后观察效果，再添加浮动，就会看出不同了。

文字绕图

文字绕图也用到了浮动的知识，即把上面代码中盒子box1的位置换成一张图片的地址，然后把图片浮动起来，让文字标签顶上去就会实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
    *{
        margin: 0;
        padding:0;
    }
        /*.box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }*/
        /*这里把盒子换成图片就实现了文字绕图了*/
        img{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        p{
            /*当我给定内容时，但如果不给定高时，文字会自动撑开父元素*/
           /* height: 200px;*/
            background-color:blue;
           /* overflow:scroll;*/
           /* float: left;*/
        }
    </style>
</head>
<body>
        <!-- <div class="box1"></div> -->
        <img src="C:\Users\ljy\Desktop\图片1.png">
        <p>
            1.形散神聚:"形散"既指题材广泛、写法多样，又指结构自由、不拘一格;"神聚"既指中心集中，又指有贯穿全文的线索。散文写人写事都只是表面现象，从根本上说写的是情感体验。情感体验就是"不散的神"，而人与事则是"散"的可有可无、可多可少的"形"。
        2."形散"主要是说散文取材十分广泛自由，不受时间和空间的限制;表现手法不拘一格:可以叙述事件的发展，可以描写人物形象，可以托物抒情，可以发表议论，而且作者可以根据内容需要自由调整、随意变化。"神不散"主要是从散文的立意方面说的，即散文所要表达的主题必须明确而集中，无论散文的内容多么广泛，表现手法多么灵活，无不为更好的表达主题服务。
        3.意境深邃:注重表现作者的生活感受，抒情性强，情感真挚。
        作者借助想象与联想，由此及彼，由浅入深，由实而虚的依次写来，可以融情于景、寄情于事、寓情于物、托物言志，表达作者的真情实感，实现物我的统一，展现出更深远的思想，使读者领会更深的道理。
        4.语言优美:所谓优美，就是指散文的语言清新明丽(也美丽)，生动活泼，富于音乐感，行文如涓涓流水，叮咚有声，如娓娓而谈，情真意切。所谓凝练，是说散文的语言简洁质朴，自然流畅，寥寥数语就可以描绘出
        </p>
</body>
</html>

如图所示:

文字绕图.JPG

内联元素的浮动

我们在前面讲到浮动的时候，有一句：元素一旦浮动，就会变成为一个块级元素。
那么内联元素也是如此，本身内联元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
        .box1{
            /*在文档流中，子元素的宽度默认占父元素的全部*/
            /*height: 100px;*/
            background-color: red;
            /*
            当元素设置浮动以后，会完全脱离文档流.
            块元素脱离文档流以后，高度和宽度都被内容撑开
            如果没有内容，我们就得为其设置宽高
            */
            float: left;
        }
        .s1{
            /*
            开启span的浮动
            内联元素脱离文档流以后会变成块级元素
            那么我们设置的宽和高就能用了
            否则内联元素是不能设置宽和高的
            只能被其内容撑开。
             */
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="box1">a</div>
<span class="s1">hello</span>
</body>
</html>

有任何问题请给我留言，或者直接发我邮箱taijirenlijunyang163@.com。欢迎大家交流讨论。