float实现文字环绕效果

实现效果如下：

一、问题分析

接到需求就是右侧显示图片，左侧显示一个标题和内容。第一时间没有想到其他的布局的好的实现方式，就想到了float布局。于是乎去查了下有关float的文档，float 是相当的好用。

float定义如下：
float CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性（与绝对定位相反）。

二、代码实现

直接上代码：

<div class="container">
    <img class="avator" src="./images/avatar.jpg" alt="">
    <h3 class="title">《滕王阁序》</h3>
    <div class="content">
      披绣闼，俯雕甍，山原旷其盈视，
    川泽纡其骇瞩。闾阎扑地，钟鸣鼎
    食之家；舸舰弥津，青雀黄龙之舳。
    云销雨霁，彩彻区明。落霞与孤鹜
    齐飞，秋水共长天一色。渔舟唱晚，
    响穷彭蠡之滨；雁阵惊寒，声断衡
    阳之浦。
    </div>
</div>

.avator {
  float: right;
  width: 100px;
  height: 100px;
}

.container {
  border: 1px solid #000;
}

.content {
  text-indent: 2em;
}

得到效果图如下：

perfect!!
但还是有一个小问题， 当文字很少的时候，就会出现图片溢出的问题，如下图所示。

在查文档时，发现display有如下一个属性：display:flow-root。官方定义如下：该元素生成一个块级元素盒，其会建立一个新的区块格式化上下文，定义格式化上下文的根元素。
用人话说就是可以解决上述的浮动元素溢出的问题，在外层元素上添加该属性，得到如下效果。

.container {
  display: flow-root;
}

浮动元素撑开了外部容器，图片溢出的问题被解决了。

如果在container元素上设置overflow:hidden; 同样可以实现该效果。

.container {
  overflow: hidden;
}

ps: 需要演示文件的小伙伴可以关注私信哦~