html实现输入框高度自适应
情况一：父div中只有一个元素时正常写
做网页的时候为了解决textarea输入时可以随着文本的增加自动调整高度，将父div的heigth设置为auto
情况二：父div中有两个元素且设置了浮动，如果设置父div高度为auto后会出现下图的情况
</div>
<div style="width: 200px;height: 50px;float: right">
<textarea class="textarea"></textarea>
</div>
<div style="clear: both"></div> <------清除浮动
加上清除浮动的标签后，父div并不能随着文本框的高度增加而增加
解决方案
将div设置为可输入状态 contenteditable=“true”，实现类似文本框的效果
全部代码：
<style>
.header{
height: auto;//关键代码，父div的高度自适应，可以跟随子div高度变化
width: 300px;
background-color: #8FCDA0;
padding-top: 20px;
padding-bottom: 20px;
}
.header_left{
float: left;//关键代码，设置子div浮动效果
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 5px;
background-color: #F581B1;
}
.header_right{//可输入div的样式，类似文本框
min-height: 50px;//设置最小高度
height: auto;//高度根据内容自适应
float: right;//关键代码，设置子div浮动效果
width: 198px;
border: 1px solid #4E5465;
background-color: white;
}
.footer{
width: 300px;
height: 100px;
color: white;
margin-top: 20px;
background-color: #4E5465;
}
</style>
<body>
<div class="header">
<div class="header_left">一个div输入框</div>
<div class="header_right" contenteditable="true"></div>
<!--设置为可输入状态-->
<div style="clear: both"></div>
<!--清除浮动-->
</div>
<div class="footer">我是底部的div</div>
</body>
效果：
（底部的div大小没有变化，只是切图时丢失了）
