css - html5 元素不占用空间并在下一部分溢出

Question

我想做一个简历页面。这是一个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{ clear:both; } 如果你想保持 2 列并排浮动。

Answer 3

发生这种情况是因为section带有类的内部skills是浮动的，所以外部section崩溃了。一种解决方法是创建一个新的块格式化上下文，这可以通过添加

overflow: hidden

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