[分享]css不固定高度如何浮动

CSS中不固定高度元素如何浮动是一个经常会遇到的问题。比如，在一个页面中需要两列布局，一列宽度固定，一列宽度不固定。如何让不固定高度的列跟着固定高度的列浮动呢？ This is the fixed h...

CSS中不固定高度元素如何浮动是一个经常会遇到的问题。比如，在一个页面中需要两列布局，一列宽度固定，一列宽度不固定。如何让不固定高度的列跟着固定高度的列浮动呢？

<div style="width: 70%; float: left">
  <p>This is the fixed height column</p>
</div>
<div style="width: 30%; float: right">
  <p>This is the variable height column</p>
</div> 

在上述代码中，我们使用了float属性来让两个元素实现浮动，但是会发现变量高度列并没有跟着固定高度列一起浮动。

这是因为，不固定高度的元素默认的高度是由里面的内容撑开的，所以无法像固定高度元素一样直接浮动。

解决这个问题的方法就是在不固定高度元素的父级元素中添加一个clearfix类，清除浮动同时强制父级元素撑开高度。

<div style="width: 70%; float: left">
  <p>This is the fixed height column</p>
</div>
<div style="width: 30%; float: right">
  <div style="height: 100%; background-color: green;">
    <p>This is the variable height column</p>
    <div class="clearfix"></div>
  </div>
</div>
<div class="clearfix"></div> 

在上述代码中，我们在变量高度列的外层div中添加了一个类名为clearfix的元素，并且同时在代码结尾处添加了一次clearfix类，以保证所有浮动都被清除。

最后，我们在CSS中定义clearfix的样式：

.clearfix {
  clear: both;
} 

这样，不固定高度元素就可以实现浮动了。