网页块级元素底部容器占位问题

任意前端编辑工具

任意浏览器

两个块级容器放到一个父容器里，为什么父容器底下的另一个容器会上升并占用父容器的部分位置，根据描述应该是这样一个结果。布局代码和css代码及显示结果如下图。

这种情况经常做布局的童鞋一看就知道问题出在哪儿，肯定是子容器1和2不占位，并且父容器没有设置固定高度因此底部容器才会靠到父容器中文字的下方，要解决这个问题，把父容器高度固定死了是最简单的办法，但是在实际使用中，如果父容器不允许设定固定高度，这个问题还有更好的解决办法么？大家知道如果把容器的overflow设置为hidden容器会将超出的内容隐藏掉，这是针对父容器高度宽度固定的情况下的设定，如果高度没有设定或者高度只设定了最小高度，情况会怎样呢，我们现在将父容器的overflow设为hidden看看。

另外需要注意的是，块元素（div、p、ul等）如果不设定宽度，他们默认是跟父容器宽度一致的，并且块元素前后带有换行符。这里的两个字容器之所以在一行是因为字容器1和2各占父容器50%并且使用了float：left属性，如果1和2有border（边框）或者设置了padding（内边距）、margin（外边距）我们还得考虑这三个设置的占位。实际布局中的问题远比这个例子复杂，因为页面容器中还有浮动块元素，绝对定位块，行内块，内联元素等。这需要我们在平时一一搞清不同元素的占位原理，这样无论多复杂的布局，我们都能信手拈来。