图文规则混排

孤立的图文混排在实际排版中用的比较少，这时图像仅作为插画或点缀。

为了使图像及其说明文字显示为整体，一般用div元素把图像和说明文字封装在一起，通过对div的控制来实现整体版式的控制。通过定义图像对象的浮动显示实现文本环绕的效果

例子：

CSS:

*{padding:0;margin:0;}
        .cont{
            position:relative;
            margin:50px auto;
            width:80%;
        }
        .tit{
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            /* margin-bottom: 15px; */
        }
        .txt p{
            text-indent: 50px;/* 文字自动缩进 */
            line-height: 30px;/* 文字行距的调整 */
            margin-bottom: 15px;/* 段落之间距离的调整 */
        }
        .txt img{
            float: right;
            margin-left:15px;
            margin-top: 5px;
        }
        .workers{
            display: block;
            height: 28px;
            line-height: 28px;
            width: 100%;
            text-align: center;
            margin-bottom: 30px;
        }

HTML:

<div class="cont">
        <h2 class="tit">梦中荷花，风中之韵</h2>
        <span class="workers">---作者：文秀</span>
        <div class="txt">
            <p>荷花真美！如霞似雪，如画如诗；一朵朵荷花亭亭玉立，有的尽情欢笑，随风翩翩起舞；有的含苞待放，不失体态优雅。荷花的盛开，犹如我们的人生一样，充满向往、淋漓意境，恰如这荷塘静静的绿水，清清悠悠、平平淡淡。</p>
            <p>荷花在炎炎夏日里如约而来，一片片怒放的荷花，开放在无限思绪的心田里，幽静的荷塘带着旧梦续写着点点的往事情怀。看那细细的荷枝上，承载着朵朵的妩媚在风中摇曳，亭亭玉立，不屈不饶；再看那庞大的荷叶，碧绿柔嫩，不怕阳光炎热，不怕风吹雨打，依然在那里坚韧不拔，那独特的姿态生活，安静脱俗，看似娇弱中却透露出不屈不挠的坚强。荷花象征着追求自由、理想、独立的自主生活。</p>
            <p>夏天是荷花飞舞盛开的季节，微风习习，荷池荡漾，一层层碧绿的荷叶托着优美的荷花，轻轻地摇曳起来，摇摇摆摆地在翩翩起舞，引来几只蜻蜓在荷池上空飞旋，千姿百态，美不可言。盛开的红荷，她那美丽的颜色让人不知如何形容，犹如一枝蘸满油彩的画笔点在花尖上，无声的盛开，透着那晶莹的神韵。清风摇曳一池荷叶，漫无边际地铺展一片，仿佛把这灵性的绿色渲染到极点，慢慢深沉般地弹奏出绿的旋律，也只有这荷叶之绿，才能映衬出荷花的高贵、独立、圣洁之美。看着一望无边的荷花，仿佛自己也融进了阳光，融入了碧海蓝天的无边狂野中，生命如蓝天一样博大无边。突然，荷叶中冒出了朵朵的荷花，有的花瓣全都展开了，露出了金黄色的花蕊和嫩黄色的莲蓬，凝眸而望，仿佛她们在仰头微笑，带着阵阵醉人的清香迎面而来。“出淤泥而不染，濯清涟而不妖。”简直被这景色深深地陶醉了。仿佛看到了一幅高雅素洁的风景画！</p>
            <img src="img/hehua.jpg">
            <p>一花一世界，一叶一菩提。荷花半开，就如是生命的循序渐进。细数流年，将心中黯然无色的天空一丝一缕的拨开，如梦初醒的明媚。荷花看上去，给人一种雍容大气的感觉，微风吹过，一股清香扑鼻而来，从远处就能闻到荷花，淡淡的，甜甜的清香。张开双臂闭上双眼，深情贪婪地吸一口，此刻心情定是格外舒畅。倘佯在荷花的海洋之间；陶醉在荷花的香气之中。微微睁开陶醉的双眼，哇！荷花的颜色真好看，有粉中透白的、洁白如雪的、紫中带粉的。盛开中的荷花就像是一张张灿烂的笑脸，妩媚娇艳；快看还有半开半合的，好像害羞中的少女那般的纯洁，让人不禁肃然起敬。就像那一首诗：“接天莲叶无穷碧，映日荷花别样红。”真美！</p>
            <p>荷花从不和别的花争奇斗艳，也不和别的花比美，她虽然没有牡丹那样华丽高贵，也没有梅花那样顽强不屈。她只是孤独地站在风雨中，默默无闻地立在水里。她送走一个夕阳，迎来一个朝霞。虽然她的生命只能属于一个短暂的夏季。但在花落花开飘逝的流光里，她如一朵淡雅的花束，出淤泥而不染，那沁人幽香，芬芳了荷池，陶冶了人生，也醉染了流年。</p>

            <p>幽幽月光将荷叶倒影在水中，是否现实的存在如梦幻般难以触及，唯留现实与梦幻随风飘荡。 荷叶田田，时光，终将似一朵在掌心凋零的荷花，书写出成长的印记和岁月的无情，也雕刻出了每个人不同的人生足迹。就在残荷的刹那，仿佛看到了那些枯枝败叶灵魂中，不愿轻易放弃的那一种孤傲。凝望着微风摇曳中的残荷，此刻回想，败落的枯叶与繁盛的花枝竟然是同样的美丽。如果说衰败都是兴旺的开始，那么每一个生命的成熟，是否都预示着下一个的衰老与成败。突然间有一种感动在心中蔓延开来，不知道我们将老去的生命，是否如这残荷一样昂扬与从容，或许每个人生命中最后的那一束守望；成败与再生之间有着一段怎样的生命决择？</p>
            <p>流年如梦，荷花飘拂淡淡香，一朵朵柔情似水，华而不媚，艳而不俗，虽然不能免遭岁月飘零的命运，但她也会以微笑的美姿，亭亭玉立于滚滚红尘之中。她的美，是一种由内而外所散发出的心灵之美！</p>
            <p>闲暇之余，简单的时光里，品一壶茶，随着悠扬的音乐声，伴着凝香的文字，静侯荷叶漂浮，细闻悠悠花香。感受着字里行间流露出的花蕊甜香，此刻人世间的浮躁早已随风飘散。微风拂过，朵朵荷花摇曳多姿。仰望天空，沧海桑田，任由时光几多飘摇，化作红尘一笑，独醉这流年静静安好！</p>
        </div>
    </div>

图像与文字混排原理都是建立在浮动定位基础上的，对于大段文字来说不适合进行浮动定位，而图像或div对象作为一个独立的块状结构，可以很容易的进行控制。