css float 布局

最新推荐文章于 2025-05-26 20:21:04 发布

原创最新推荐文章于 2025-05-26 20:21:04 发布 · 669 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #布局 #前端

7、web 开发专栏收录该内容

15 篇文章

订阅专栏

最近写前端页面时，需要将两个 div 并排起来，最简单的方法是通过 float 属性将元素浮动。下面详细介绍

元素浮动

当构建一个页面的排版时，使用元素浮动是一种直观的方法去控制元素的位置。元素浮动可以让一个元素靠近或者远离另一个元素。它根据一个元素的大小和其父节点容器的大小来构造这个元素在排版中与其他元素之间的关系。

当一个元素被浮动时，这个元素是挨着前一个元素，还是出现在新的一行？这取决于它相邻元素的位置。

当然，元素浮动在提供强大威力的同时，也带来了很多问题。一个著名的问题就是，当一个父节点包括了若干浮动的子元素时，父节点的排版会考虑到浮动子元素的大小和位置，但是子元素并不会影响父节点的大小。在这种情况下，父节点的height变成了0，并且忽略其他属性。很多时候，这个问题没有被注意到，特别是当父节点没有附合任何的CSS样式，而且嵌套的元素也看上去被正确地排列了。

如果没有正确地排列嵌套元素，那么可能引发排版上的错误。请参阅下面的这个例子，类名为.box-set的DIV容器应该有浅灰色的背景，但是因为其嵌套元素都是浮动元素，所以原本期望的背景色没有出现。如果你查看.box-set的盒模型，你会发现它的height值为0。

<div class="box-set">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

.box-set {
  background: #e8eae9;
}
.box {
  background: #8ec63f;
  height: 100px;
  float: left;
  margin: 10px;
  width: 200px;
}

使用overflow

在父容器上设置 overflow:auto 可以让它自动包含子元素，从而具有了实际的height值，这样上例中的灰色背景将得到显示。

在IE6中使用这一招时需要给父节点容器设置height或者width属性。因为实际情况中height常常是可变的，所以是设置width的值。对于苹果平台上的IE，设置overflow:auto将会给容器增加滚动条，所以最好是设置 overflow : hidden 。

参考

http://www.cnblogs.com/newyorker/archive/2013/02/01/2886282.html