今天下午的空上了会儿网，看到一个帖子咨询网页布局的事情，帖子内容大概就是说自己的两个块级容器放到一个父容器里，为什么父容器底下的另一个容器会上升并占用父容器的部分位置，根据他的描述应该是这样一个结果。
子容器1和2都在父容器里面，底部容器却占用了父容器部分位置
这种情况经常做布局的童鞋一看就知道问题出在哪儿，肯定是子容器1和2不占位，并且父容器没有设置固定高度因此底部容器才会靠到父容器中文字的下方，要解决这个问题，把父容器高度固定死了是最简单的办法，但是在实际使用中，如果父容器不允许设定固定高度，这个问题还有更好的解决办法么？
大家知道如果把容器的overflow设置为hidden容器会将超出的内容隐藏掉，这是针对父容器高度宽度固定的情况下的设定，如果高度没有设定或者高度只设定了最小高度，情况会怎样呢，我们现在将父容器的overflow设为hidden看看。
底部容器下去了，没有错，由于子容器1和2使用了float属性导致不占位，但是父容器overflow为hidden高度未设定，父容器不知道多少高度外需要隐藏，因此自动扩展到了字容器1和2的下方，如果子容器1和2高度不一样，父容器会选择最高的那个子容器的底部对齐。
另外需要注意的是，块元素（div、p、ul等）如果不设定宽度，他们默认是跟父容器宽度一致的，并且块元素前后带有换行符。这里的两个字容器之所以在一行是因为字容器1和2各占父容器50%并且使用了float：left属性，如果1和2有border（边框）或者设置了padding（内边距）、margin（外边距）我们还得考虑这三个设置的占位。
实际布局中的问题远比这个例子复杂，因为页面容器中还有浮动块元素，绝对定位块，行内块，内联元素等。这需要我们在平时一一搞清不同元素的占位原理，这样无论多复杂的布局，我们都能信手拈来。
网友评论