div随内容调整高度(父元素高度随子元素变化)

你就说我的头像是不是很酷，很有个性？

嗯嗯，帅的不行了呢！你吃饭了吗？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？

.message { width: 100%; padding-top: 12px }
.message .icon { position: relative; display: block; padding: 0px; height: 44px; width: 44px; float: left }
.message .icon.user { margin-left: 9px; margin-right: 15px }
.message .icon.friend { margin-left: 16px; margin-right: 8px }
.message .text { display: block; width: 223px; height: auto; padding: 11px 20px 19px 17px; font-size: 14px; color: #4a4a4a; float: left }
.message .text.user { background: rgba(24,187,155,0.60); margin-left: 69px }
.message .text.friend { background: #d8d8d8; margin-right: 69px }
.clear { clear: both }

                <div class="message">
                    <img class="icon friend" src="/icon/default.ico"></img>
                    <a class="text friend">你就说我的头像是不是很酷，很有个性？</a>
                    <div class="clear"></div>
                </div>
                <div class="message">
                    <a class="text user">嗯嗯，帅的不行了呢！你吃饭了吗？</a>
                    <img class="icon user" src="/icon/default.ico"></img>
                    <div class="clear"></div>
                </div>

html

.message {
    width: 100%;
    padding-top: 12px;
}
.message .icon {
    position: relative;
    display: block;
    padding: 0px;
    height: 44px;
    width: 44px;
    float: left;
}
.message .icon.user{
    margin-left: 9px;
    margin-right: 15px;
}
.message .icon.friend {
    margin-left: 16px;
    margin-right: 8px;
}
.message .text {
    display: block;
    border-radius:10px;
    width: 223px;
    height: auto;
    padding: 11px 20px 19px 17px;
    font-size:14px;
    color:#4a4a4a;
    float: left;
}
.message .text.user {
    background:rgba(24,187,155,0.60);
    margin-left: 69px;
}
.message .text.friend {
    background:#d8d8d8;
    margin-right: 69px;
}
.clear {
    clear: both;
}

css

css样式clear设为both，然后父元素的高度就会随子元素改变了

参考自让div父元素的高度随子元素高度的变化而变化