HTML元素父子关系问题

Question

我是 HTML 新手。在我的 HTML 代码中，我有不同的部分。在我的元素部分中，我有 3 个子部分，但不知何故，我的简历部分标题位于我的元素部分下方，并且一个单独的部分显示为元素部分的一部分。 链接到我的存储库:https://jobarkhuizen.github.io/FreeCodeCampPersonalPage/

我通过 W3C 验证程序运行我的代码，并在运行中包含源代码、大纲和清理 html。验证器运行没有返回错误，大纲显示元素和简历部分都是 Body 标签和 Columns Tribute 页面的子级，登陆页面和技术页面是元素部分的子级

<section id="projects">
    <h2><a id="portfolio">Projects</a></h2>
        <section id="col1"><h3 style="text-align: center;">Tribute Page</h3>
            <a href="https://jobarkhuizen.github.io/FCC_Tribute_Page/" target="_blank"> 
                <img class="project-tile" src="tributepage.jpg"  alt="Tribute Page Picture"></a>
                    <p>The following guidelines was provided for the tribute page.  It should have a div element with a corresponding id="img-div". Within the img-div element, there should be an img element with a 
                            corresponding id="image".  Within the img-div element, there should be an element with a corresponding id="img-caption" that contains textual
                            content describing the image shown in img-div.  There should be an element with a corresponding id="tribute-info", which contains textual content
                            describing the subject of the tribute page. Ther should be an a element with a corresponding id="tribute-link", which links to an outside site 
                            that contains additional information about the subject of the tribute page, this link must open in a new tab.  The img element should responsively
                            resize, relative to the width of its parent element, without exceeding its original size and should be centered within its parent element.
                            </p>
        </section>

    <section id="col2"><h3 style="text-align: center;">Landing Page</h3>
        <a href="https://jobarkhuizen.github.io/LandingPage/" target="_blank">
            <img class="project-tile" src="Landingp.jpg" alt="Landing Page Picture"></a> 
                <p>The following guidelines was provided for the product landing page. The page should have a header element with a corresponding id="header".
                        An image within the header element with a corresponding id="header-img".
                        Within the #header element a nav element with a corresponding id="nav-bar".
                        At least three clickable elements inside the nav element, each with the class nav-link.
                        When you click the nav-link button in the nav element, it goes to the corresponding section of the landing page.
                        Embed a watch-able video with id="video".
                        A form element with a corresponding id="form".  Within the form, there is an input field with id="email" where you can enter an email address.
                        The #email input field should have placeholder text to let the user know what the field is for and uses HTML5 validation to confirm text is correct.
                        Within the form, there is a submit input with a corresponding id="submit".</p> 
    </section>

    <section id="col3"><h3 style="text-align: center;">Technical Page</h3> 
        <a href="https://jobarkhuizen.github.io/FCC-Technical-Page/" target="_blank"> 
          <img class="project-tile" src="technicalp.jpg" alt="Technical Page Picture"></a>
                <p>The following guidelines was provided for the technical page. Should have a main element with a corresponding id="main-doc", which contains the page's main content.
                    Within the #main-doc element, you should have several section elements, each with a class of main-section.
                    The first element within each .main-section should be a header element which contains text that describes the topic of that section.
                    Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it. 
                    Any spaces should be replaced with underscores (id="Javascript_and_Java").
                    The .main-section elements should contain at least 10 p elements in total.
                    The .main-section elements should contain at least 5 code elements in total.
                    The .main-section elements should contain at least 5 li items in total. A nav element with a corresponding id="navbar".</p> 
    </section>
</section>

<section>
    <h2><a id="resume">Resume</a></h2>
        <p>Studying Responsive Web Design through FreeCodeCamp.  My next project is studying and completing JavaScript and SQL.</p>
        <p>I have done automated testing on Winrunner and QTP and managed projects through TestDirector.</p>
        <p>Did testing in both waterfall and agile development environments. </p>
        <p>This portfolio page is for Freecodecamp certification.  I have loaded a personal portfolio page on my Github account which I will update as soon as possible.</p>

</section>

标题应该只有棕色背景并且居中对齐，但是我的整个元素部分都是棕色背景并且简历标题位于元素部分页面的右侧

Answer 1

当你使用 css 时 float属性为 left，则内容流向该元素的右侧。这与 block 元素的正常流不同， block 元素垂直堆叠在另一个下面。

有很多方法可以解决这个问题，规范中建议的一种方法是使用 clear作为两者:

both: Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.

所以把你的简历部分设为

<section class="resume">
</section>

并将其 css 添加为:

.resume {
    clear: both;
}

有关完整的故事，请参阅 Visual Formatting Model

另请注意，CSS 引入了许多新功能，我们不必使用 floats 进行列布局。我们有相同的 grid 和 flex 布局。