html - 向 HTML/CSS 中的部分添加背景颜色时出错

Question

我正在尝试使用 CSS 向该网站的时事通讯部分添加深色背景色。相反，几乎整个页面都显示背景颜色。我检查了 HTML 文档以确保我错误地打开了一个 div 或部分，但什么也没发现。 谁能告诉我为什么我的页面的 75% 被识别为“时事通讯”部分？

/* Will prevent padding from affecting the width of our columns */
* {
    box-sizing: border-box;
}

html, body {
    font-family: 'Open Sans',sans-serf;
}

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}

/* Prevents floating elements on either side. */
.clearfix:after {
    clear: both;
}

.wrapper {
    width: 1440px;
    max-width: 90%;
    margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
}

/* Header */
#top_header {
    padding: 1.5em 0;
}

#top_header .logo {
    float: left;
    text-transform: uppercase;
    font-size: 1.15em;
    font-weight: 700;
}

#top_header .logo span {
    font-weight: 300;
    color: #73e298;
}

#top_header #main_nav {
    float: right;
    font-size: .9em;
    padding-top: 1em;
}

#top_header #main_nav a {
    color: #8b8b9f;
    text-decoration: none;
    margin-left: 1em;
}

#banner {
    background: url(../images/banner_background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    padding: 6.5em, 0;
}

#banner #banner_content_wrapper {
    width: 900px;
    max-width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center
}

#poster {
    width: 275px;
    position: relative;
    float: left;
}

#poster .featured_image {
    width: 100%;
    max-width: 100%;
    border-radius: .5em;
    -webkit-box-shadow: 0px 0px 76px 0px rgba(0, 0, 0, 0.47);
    -moz-box-shadow: 0px 0px 76px 0px rgba(0, 0, 0, 0.47);
    box-shadow: 0px 0px 76px 0px rgba(0, 0, 0, 0.47);
}

/* Moves play button to center of poster image */
#poster .play_button {
    position: absolute;
    width: 80px;
    left: 50%;
    top: 50%;
    margin: -40px 0 0 -40px;
}
/* Moves Deadpool movie info to the right of the image. With better spacing */
#content {
        float: left;
        width: 500px;
        margin-left: 100px;
 }

/* Changes Deadpool title to white, increases font size, and adjusts spacing in the display*/
#content .title {
        display: inline;
        font-size: 1.75em;
        color: #FFFFFF;
}

/* Rating system now side by side with title instead of below.*/
#content .ratings {
        display: inline;
        margin-left: 1em;
}

/* Adds color and increases size of stars */
#content .ratings i {
        color: #73e298;
        font-size: 1.35em;
        margin: 0 .15em;
}

/* Changes last star to a grey color */
#content .ratings .inactive {
        color: #48494d;
}

/* Changes description color to white which shows up better with the background. Double spaces description as well.*/
.description {
        color: #bbbebf;
        font-size: 1em;
        line-height: 2;
}


.info {
        color: #FFFFFF;
        font-size: .8em;
        font-weight: 700;
        margin-top: 3em;
}

.info span {
        margin: 0 .5em;

}


.row {
        width: 100%
}

/* Organizes images horizontally */
.post {
        width: 14%; /* 100% /6(images) -2.5% */
        float: left;
        margin-right: 2.5%;
}

/* Shrinks images to playing card size. Adds space to images */
.post img {
            width: 100%;
            max-width: 100%;
            border-radius: .5em;
}


.post .title {
            font-size: 1.25em;
            margin: 1em 0 0 0;
            color:#252529;
}

/* Lightens the rating and mins. Slight size and margin adjustment */
.post_info {
            font-size: .75em;
            color: #8b8b9f;
            margin: 0.5em 0;
}


/* Better spacing between top movies and top shows*/
#top_movies, #top_shows {
    padding: 5em 0;
}

#top_movies, #top_shows header {
    padding: 0 0 1.5em 0;
}

#top_movies, #top_shows header h2, .view_more {
    display: inline;
}

#top_movies, #top_shows h2 {
    font-size: 1.75em;
}

#top_movies, #top_shows, .view_more {
    float: right;
    font-size: .8em;
    margin: .75em 3.5% 0 0;
}

/*Adds border between popular movies and tv sections*/
#top_movies {
    border-bottom: 1px solid #d4d4d4;
}

 #newsletter {
    padding: 5em 0;
    text-align: center;
    background: #2a2a2e;
}

#newsletter .newsletter_inner{
    width: 600px;
    margin: 0 auto;
}

#newsletter h2 {
        font-size: 1.75em;
        color:#FFFFFF;
}

 <!DOCTYPE html>
<html>
<head>
    <title>Movies &amp; TV | Dan Mayle </title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
    <!--Header including navigation bar-->
    <header id="top_header" class="clearfix">
        <div class="wrapper">
            <h1 class="logo">Movies<span>&amp;</span>TV</h1>
            <nav id="main_nav">
                <a href="#">Movies</a>
                <a href="#">TV Shows</a>
                <a href="#">Celebs &amp; Photos</a>
                <a href="#">News</a>
            </nav>
        </div>
    </header>

    <section id="banner" class="clearfix">
        <div id="banner_content_wrapper">
            <div id="poster">
                <img src="images/movies/deadpool.jpg" alt="Deadpool Movie Poster" class="featured_image">
                <img src="images/play_button.png" alt="Play Trailer" class="play_button">
            </div>
            <div id="content">
                <h2 class="title">Deadpool</h2>
                <div class="ratings">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star inactive"></i>
                </div>

                <p class="description">A former Special Forces operative turned mercenary is subjected to a rogue experiment that leaves him with accelerated healing powers, adopting the alter ego Deadpool.</p>

                <p class="info">R <span>|</span> 108 min <span>|</span> Action, Adventure, Comedy <span>|</span> 12 February 2016</p>
            </div>
        </div>
    </section>

    <section id="top_movies" class="clearfix">
        <div class="wrapper">
            <header class="clearfix">
                <h2>Popular Movies</h2>
                <p class="view_more">View All Movies</p>
            </header>

            <div class="row">
                <div class="post">
                    <img src="images/movies/the-martian.jpg" alt="The Martian">
                    <h3 class="title">The Martian</h3>
                    <p class="post_info">PG13 | 144 Minutes</p>
                </div>
            </div>

            <div class="row">
                <div class="post">
                    <img src="images/movies/inside-out.jpg" alt="Inside Out">
                    <h3 class="title">Inside Out</h3>
                    <p class="post_info">PG | 95 Minutes</p>
                </div>
            </div>

            <div class="row">
                <div class="post">
                    <img src="images/movies/jurassic-world.jpg" alt="Jurassic World">
                    <h3 class="title">Jurassic World</h3>
                    <p class="post_info">PG13 | 124 Minutes</p>
                </div>
            </div>

            <div class="row">
                <div class="post">
                    <img src="images/movies/mad-max.jpg" alt="Mad Max">
                    <h3 class="title">Mad Max: Fury Road</h3>
                    <p class="post_info">R | 120 Minutes</p>
                </div>
            </div>

            <div class="row">
                <div class="post">
                    <img src="images/movies/star-wars.jpg" alt="Star Wars">
                    <h3 class="title">Star Wars: The Force Awakens</h3>
                    <p class="post_info">PG13 | 109 Minutes</p>
                </div>
            </div>

            <div class="row">
                <div class="post">
                    <img src="images/movies/avengers.jpg" alt="The Avengers">
                    <h3 class="title">Avengers: Age Of Ultron</h3>
                    <p class="post_info">PG13 | 141 Minutes</p>
                </div>
            </div>

        </div>
    </section>

    <section id="top_shows" class="clearfix">
        <div class="wrapper">
            <header class="clearfix">
                <h2>Popular Shows</h2>
                <p class="view_more">View All Shows</p>
            </header>

            <div class="row">
                <div class="post">
                    <img src="images/tv_shows/walking-dead.jpg" alt="The Walking Dead">
                    <h3 class="title">The Walking Dead</h3>
                    <p class="post_info">TV-MA | Season 4</p>
                </div>
            </div>

            <div class="row">
                <div class="post">
                    <img src="images/tv_shows/game-of-thrones.jpg" alt="Game Of Thrones">
                    <h3 class="title">Game Of Thrones</h3>
                    <p class="post_info">TV-MA | Season 6</p>
                </div>
            </div>

            <div class="row">
                <div class="post">
                    <img src="images/tv_shows/breaking-bad.jpg" alt="Breaking Bad">
                    <h3 class="title">Breaking Bad</h3>
                    <p class="post_info">TV-MA | Season 5</p>
                </div>
            </div>

            <div class="row">
                <div class="post">
                    <img src="images/tv_shows/empire.jpg" alt="Empire">
                    <h3 class="title">Empire</h3>
                    <p class="post_info">TV-14 | Season 2</p>
                </div>
            </div>

            <div class="row">
                <div class="post">
                    <img src="images/tv_shows/master-of-none.jpg" alt="Master of None">
                    <h3 class="title">Master of None</h3>
                    <p class="post_info">TV-MA | Season 1</p>
                </div>
            </div>

            <div class="row">
                <div class="post">
                    <img src="images/tv_shows/mr-robot.jpg" alt="Mr Robot">
                    <h3 class="title">Mr Robot</h3>
                    <p class="post_info">TV-14 | Season 1</p>
                </div>
            </div>

        </div>
    </section>


    <section id="newsletter">
        <div class="newsletter_inner">
            <h2>Get the best Movie &amp; TV Show trailers straight in your inbox each week.</h2>
            <div class="sign_up_form">
                <input type="text" placeholder="First Name">
                <input type="email" placeholder="Email Address">
                <button class="button">Subscribe</button>
            </div>
        </div>
    </section>

    <footer id="main_footer">
        <p class="logo">Movies<span>&amp;</span>Stuff</p>
        <p class="copyright">&copy;2016 Movies &amp; Stuff. All Rights Reserved.</p>
        <div class="links">
            <a href="#">Terms of Service</a>
            <a href="#">Privacy Policy</a>
        </div>
    </footer>
</body>
</html>

Answer 1

去掉#top_movies 和#top_shows 上不必要的 float:right。您通过 float 它们然后应用 clearfix 来超越自己。 :)