Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

float布局的几个常见问题解决

  float本身是一个算法很复杂的东西,我们先不纠结它的本质,而说说布局。布局就是需要让元素横向排列,并且可以对元素的大小进行编辑。普通的block元素只能实现纵向排列,因此需要使用float让元素横向排列。 <!DOCTYPE html>
<style>
.panel {
  border:1px solid green;
  height:200px;
}
.panel div {
  font:14px/100px 微软雅黑;
  text-align:center;
  width:100px;height:100px;
  border:1px solid red;
  margin:10px;
  /*左浮动*/
  float:left;
}
</style>
<div class="panel">
  <div>次碳酸钴</div>
  <div>次碳酸钴</div>
</div>
<script>

  这是最简单的浮动例子了。但是在IE6下还需要做个BUG修正,因为IE6有双倍margin的bug,这个例子中使用了margin,所以在IE6下显示为:

  在IE6中,容器内的浮动元素,在浮动方向上与容器壁接触(计算接触时忽略元素本身的margin)时,浮动方向的margin值会变成原来的两倍。例子中的元素是float:left,第一个元素与左边容器壁接触,所以原来的margin-left是10px,在IE6下就变成了20px。对比前面Chrome下的效果就很容易看出。解决这个问题可以把第一个浮动元素变成inline-block。但是IE对inline-block的支持本身就很奇怪,IE6下的block元素不能直接设置inline-block,需要先inline,再添加hasLayout。而float这个属性的添加,便会给元素带去hasLayout。所以,IE6下只要对浮动的元素添加display:inline就可以了。针对IE6可以使用CSS hack完成。 .panel div {
  /*
    ...
    原来的属性
    ...
  */
  /*IE6修正*/
  _display:inline;
}

  现在,双倍margin问题就解决了。在使用浮动布局的时候,如果发现在IE6下布局错乱,就可以想想是不是很这个问题引起的。
  接下来就是,清除浮动问题。上面的例子中,容器高度是给定的,如果容器需要自动高度呢?我们把固定的高度去掉。 <!DOCTYPE html>
<style>
.panel {border:1px solid green;}
.panel div {
  font:14px/100px 微软雅黑;
  text-align:center;
  width:100px;height:100px;
  border:1px solid red;
  margin:10px;
  /*左浮动*/
  float:left;
  /*IE6修正*/
  _display:inline;
}
</style>
<div class="panel">
  <div>次碳酸钴</div>
  <div>次碳酸钴</div>
</div>

  看吧,容器高度变成0了,里面的浮动元素溢出了容器。浮动元素无法直接对容器的大小产生影响,除非容器本身也是浮动的。如果容器也是浮动的: .panel {border:1px solid green;float:left;}
  IE下又出了新的BUG,在IE6、7中当容器元素浮动时(hasLayout时),内部浮动元素的margin-bottom不会作用于容器底边上。这个问题没有什么好的解决方法,通常用容器的padding-bottom替代内部浮动元素的margin-bottom来解决。 <!DOCTYPE html>
<style>
.panel {
  border:1px solid green;
  float:left;
  padding-bottom:10px;
}
.panel div {
  font:14px/100px 微软雅黑;
  text-align:center;
  width:100px;height:100px;
  border:1px solid red;
  margin:10px 10px 0px 10px;
  /*左浮动*/
  float:left;
  /*IE6修正*/
  _display:inline;
}
</style>
<div class="panel">
  <div>次碳酸钴</div>
  <div>次碳酸钴</div>
</div>

  我是非常反对使用浮动元素嵌套浮动元素的,所以一般不会这么做。针对一般元素的容器而言,内部浮动元素不会对容器直接产生影响,那么我们可以间接的解决它。CSS用有个clear属性就是专门为了解决这个问题而存在的。设置了clear的block元素可以让相邻的浮动对它不生效。因此我们在容器内的底部放一个设置了clear的元素,让浮动到此为止。而这个元素本身是非float的,所以它可以把容器撑开。如果把这个元素设置的小到看不见,那么整体上的效果就很好。 <!DOCTYPE html>
<style>
.panel {border:1px solid green;}
.panel div {
  font:14px/100px 微软雅黑;
  text-align:center;
  width:100px;height:100px;
  border:1px solid red;
  margin:10px;
  /*左浮动*/
  float:left;
  /*IE6修正*/
  _display:inline;
}
.panel span {
  display:block;clear:both;
  height:0px;overflow:hidden;
}
</style>
<div class="panel">
  <div>次碳酸钴</div>
  <div>次碳酸钴</div>
  <span class="clear"></span>
</div>

  这就是清除浮动的最佳方法。但是因为这个方法需要多创建一个元素,所以感觉上这个做法很不漂亮。通常会使用一种更轻便的方法来解决,由于IE6、7对hasLayout的容器会计算高度,这个上面也见识过了。所以我们特意在IE6、7中给容器元素添加hasLayout,以达到这个效果,而在其它浏览器,我们使用伪对象,在CSS中创建一个伪元素来清除浮动。 <!DOCTYPE html>
<style>
.panel {
  border:1px solid green;
  /*IE6、7添加hasLayout*/
  *zoom:1;
}
.panel div {
  font:14px/100px 微软雅黑;
  text-align:center;
  width:100px;height:100px;
  border:1px solid red;
  margin:10px;
  /*左浮动*/
  float:left;
  /*IE6修正*/
  _display:inline;
}
/*IE7以上浏览器使用伪对象*/
.panel:after {
  content:"";display:block;clear:both;
  height:0px;overflow:hidden;
}
</style>
<div class="panel">
  <div>次碳酸钴</div>
  <div>次碳酸钴</div>
</div>

  也许你会觉得代码很长,而且IE兼容不好,但是当你真正使用的时候就会发现,这个CSS可以写成复用的,而布局中很少会出现margin-bottom的情况。所以说这个方法是最实用的。
  到这里浮动布局也没啥了,普通的学校如果讲这个估计要几个月了,其实这玩意如果好好体会一个下午的时间就能领悟,然后就是自己做点东西累积经验就OK了。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^