Question

我想制作简历页面。 here是一个jsfiddle

看起来像这样：

<section class="ResumeItem">
    <header class="ResumeContentTitle" id="ResumeKnowledgeHeader">
         <p>Professional Knowledge</p>
    </header>
    <section>
         <section class="skills">
                        <header>
                            <h3>Strong Skills</h3>
                        </header>
                        <ul>
                            <li>PHP</li>
                            <li>jQuery</li>
                            <li>SQL</li>
                            <li>Ajax</li>
                            <li>HTML</li>
                            <li>CSS</li>
                        </ul>
                    </section>

                    <section id="ResumeKnowledge" class="ResumeContentText">

                        <ul>
                            <li>PHP </li>
                            <li>another item </li>
                            <li>another item </li>
                            <li>another item </li>
                            <li>another item </li>
                        </ul>
                    </section>
</section>
<section class="ResumeItem">
                    <header class="ResumeContentTitle" id="ResumeKnowledgeHeader">
                        <p>Professional Knowledge</p>
                    </header>
</section>

事实上，ul li不占用“空间”。下一节仅考虑id =“ResumeKnowledge”部分。

I tried:

.skills ul li{
    overflow: none;
}

Answer 1

问题是该部分是浮动的，因此它位于DOM之外。添加清除可以解决问题。

http://jsfiddle.net/jp4LH/7/

我刚刚在

部分之后添加了<div style="clear:both;"></div>

Answer 2

问题是DOM之外的浮动项。较早的答案是正确的，或者您可以添加： section.ResumeItem { 明确：两者; } 如果你想保持2列彼此相邻。

Answer 3

之所以发生这种情况，是因为内部section与类skills一起浮动，因此外部section会崩溃。一个解决方法是创建一个新的block formatting context，可以通过添加

来完成

overflow: hidden

到外面部分。像这样创建一个新的块格式化上下文会强制外部section完全包含所有内部浮动元素。

html5元素不占用空间并在下一节溢出

3 个答案: