Question

我无法弄清楚为什么我的两个div容器mainContainer和sideContainer不会相互浮动，当你取消注释float时，在.container类中它们完全相邻，但它下面的一切都搞砸了我试图解决这个问题通过制作一个占据页面整个宽度的父容器，使其占据整行。请帮忙。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
}

header {
  background-color: orange;
  height: 180px;
}

#pageContent {
  background-color: orange;
  height: 100%;
}


/* Navigation */

nav {
  background-color: gray;
  height: 40px;
}


/* End of Navigation */


/* Welcome Section */

#welcomeSection {
  background-color: dodgerblue;
  height: 200px;
  width: 100%;
}


/* End of Welcome Section */


/* Script Section */

#scriptSection {
  height: 100%;
}

.container {
  //float: left;
  overflow: hidden;
  min-height: 300px;
}

#mainContainer {
  width: 70%;
  background-color: red;
}

#sideContainer {
  width: 30%;
  background-color: green;
}


/* End of Script Section */


/* Notes Section */

#notesSection {
  background-color: dodgerblue;
  height: 200px;
  width: 100%;
}


/* End of Notes Section */


/* Footer */

footer {
  background-color: orange;
  height: 180px;
}


/* End of Footer */

<!doctype html>
<html>
<title></title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="style.css">

<body>
  <header>
    <p>Header</p>
  </header>
  <nav>
    <p>Nav</p>
  </nav>
  <section id="pageContent">
    <div id="welcomeSection">
      <p>Welcome</p>
    </div>
    <div id="scriptSection">
      <div id="mainContainer" class="container">
        <p>Main Container</p>
      </div>
      <div id="sideContainer" class="container">
        <p>Side Container</p>
      </div>
    </div>
    <div id="notesSection">
      <p>Notes</p>
    </div>
  </section>
  <footer>
    <p>Footer</p>
  </footer>
</body>

</html>

Answer 1

尝试将clear:both添加到#notesSection

#notesSection {
    clear: both;
    background-color: dodgerblue;
    height: 200px;
    width: 100%;
}

或者在div和#scriptSection之间添加#notesSection，然后为其设置clear:both

的样式

<div id="scriptSection">
    <div id="mainContainer" class="container">
        <p>Main Container</p>
    </div>
    <div id="sideContainer" class="container">
        <p>Side Container</p>
    </div>
</div>
<div style="clear:both"></div>
<div id="notesSection">
    <p>Notes</p>
</div>

Answer 2

首先，您忘记在<head>代码中添加html标记。然后你已经有了解决方案：

将float: left;添加到您的容器中。

然后，您只需将clear:both;添加到您的课程notesSection和footer。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
}

header {
    background-color: orange;
    height: 180px;
}

#pageContent {
    background-color: orange;
    height: 100%;
}


/* Navigation */ 

nav {
    background-color: gray;
    height: 40px;
}

/* End of Navigation */ 

/* Welcome Section */ 

#welcomeSection {
    background-color: dodgerblue;
    height: 200px;
    width: 100%;
}

/* End of Welcome Section */ 

/* Script Section */

#scriptSection {height: 100%;}

.container {
    float: left;
    overflow: hidden;
    min-height: 300px;
}

#mainContainer {
    width: 70%;
    background-color: red;
}

#sideContainer {
    width: 30%;
    background-color: green;
}

/* End of Script Section */ 

/* Notes Section */ 

#notesSection {
    clear:both;
    background-color: dodgerblue;
    height: 200px;
    width: 100%;
}

/* End of Notes Section */ 

/* Footer */ 

footer {
    clear:both;
    background-color: orange;
    height: 180px;
}

/* End of Footer */

<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
  <header><p>Header</p></header>

  <nav><p>Nav</p></nav>

  <section id="pageContent">

    <div id="welcomeSection">
      <p>Welcome</p>
    </div>

    <div id="scriptSection">
        <div id="mainContainer" class="container">
            <p>Main Container</p>
        </div>
        <div id="sideContainer" class="container">
            <p>Side Container</p>
        </div>
    </div>

    <div id="notesSection">
        <p>Notes</p>
    </div>

  </section>
  <footer>
    <p>Footer</p>
  </footer>
</body>
</html>

当容器漂浮在下面的所有东西时

2 个答案: