css布局实践总结（part2）

一、总结:

在第一篇css布局实践心得总结中总结了通过给元素设置position：absolute的方式让元素处在BFC（块级格式化上下文）的环境中，处在BFC环境中的元素是独立的，它和外面其他元素毫无关系。

今天很兴奋的是实践到了通过将元素设置成line-block的方式让元素处在BFC的环境中，让其与外面的元素隔绝关系。还是引用这张图。

问题：如何让一个块级元素在没有采用float或position：absolute的情况下（采用这两种方式布局的元素，元素都会脱离文档流，元素大小由元素里面的内容决定），其宽度随着里面的内容而变化？

实现效果：

html代码：

css代码：

为了让中间的内容和上面的头部对齐，我给父容器添加了宽度并设置了居中，ul这个块级元素虽然没有设置宽度，但是会继承父容器的宽度980px。但是现在我不想继承父容器的宽度，我想让ul的宽度和ul里面的内容的宽度一样大。这里把ul设置成line-block（内联块级元素）之后，它就和父容器没有了关系，就不会去继承父容器的样式了。