= =题主不会照搬其样式么？
form设置relative，头像设置absolute……

关键词：绝对定位

.avatar {
    margin-right: -50px;
    float: left;
}
textarea {
    display: block;
    width: 100%;
    margin-left: 50px;
}

以上按照你的思路来的，其实要实现这种分栏布局方法有很多种，BFC、absolute、flex 都可以。

<form action="" method="post">

<p style="width:20%;float:left">
    <a href=""  class="avatar"><img src="images/avatar.jpg" alt=""></a>
</p>
<p class="floatRight" style="width:80%;float:right"> 
    <textarea placeholder="写下你的评论..."></textarea>
    <footer>
        <span>Ctrl + Return 发表</span>
        <button type="reset">取消</button>
        <button type="submit">发送</button>
    </footer>
</p>

</form>

代码先写4 后写5