当构建页面排版时，有不同的方法可以使用。使用哪一种方法取决于具体页面的排版要求，在不同的情况下，某些方法可能好过于其他的方法。
比如，可以使用若干个浮动元素来构建一个整洁简洁的页面排版。或者，如果需要更复杂的排版要求，可以考略使用其他方法，比如使用相对定位和绝对定位。
在这篇文章中，我们首先要讨论元素浮动；然后，我们要讨论如何使用x,y和z轴控制元素的位置。
元素浮动
当构建一个页面的排版时，使用元素浮动是一种直观的方法去控制元素的位置。元素浮动可以让一个元素靠近或者远离另一个元素。它根据一个元素的大小和其父节点容器的大小来构造这个元素在排版中与其他元素之间的关系。
当一个元素被浮动时，这个元素是挨着前一个元素，还是出现在新的一行？这取决于它相邻元素的位置。
当然，元素浮动在提供强大威力的同时，也带来了很多问题。一个著名的问题就是，当一个父节点包括了若干浮动的子元素时，父节点的排版会考虑到浮动子元素的大小和位置，但是子元素并不会影响父节点的大小。在这种情况下，父节点的height变成了0，并且忽略其他属性。 很多时候，这个问题没有被注意到，特别是当父节点没有附合任何的CSS样式，而且嵌套的元素也看上去被正确地排列了。
如果没有正确地排列嵌套元素，那么可能引发排版上的错误。请参阅下面的这个例子， 类名为.box-set的DIV容器应该有浅灰色的背景，但是因为其嵌套元素都是浮动元素，所以原本期望的背景色没有出现。如果你查看.box-set的盒模型，你会发现它的height值为0。