Question

我有这个html文件：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width = device-width">
    <meta name="description" content="Some training on web design">
    <meta name="keywords" content="web, design">
    <meta name="author" content="Houssem badri">
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/script.js"></script>
    <title>My Web design | Welcome</title>
  </head>
  <body>
      <header>
        <div class="branding">
          <h1>Some title</h1>
        </div>
        <nav>
          <ul>
            <li><a href="#">Contact us</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Services</a></li>
            <li><a class="current" href="#">Home</a></li>
          </ul>
        </nav>
      </header>
        <div  class="left-col">
          <section>
            <article>
              <h1>My first article</h1>
              <p>Some Text</p>
            </article>
            <article>
              <h1>My Second article</h1>
              <p>Some Text</p>
            </article>
          </section>
        </div>
        <div class="mid-col">
          <section>
            <h1> Main section title </h1>
            <p>Some Text</p>
          </section>
        </div>
      <aside role="complementary">
        <h1>Aside title</h1>
        <p> Some text </p>
      </aside>
      <footer>
          <h4>Copyright&copy <a href="#">blabla.com</a></h4>
      </footer>
  </body>
  </html>

这个css样式文件：

/* Global */

body{
    background: #E1F9A8;
    font-family: "Arial";
    font-size: 16px;
    width: 80%;
    margin: auto;
    overflow: hidden;
    padding-bottom:60px;
}
ul{
    margin:0;
    padding:0;
}

/* Header */
header{
    border: 1px solid;
    border-radius: 10px;
    background-color: #D0D8BE;
    min-height: 75px;
    padding-top:30px;
    margin-top: 20px;
}
header nav{
    margin-top:10px;
}
header li{
    float: right;
    padding: 0 10px 10px 0;
    display: inline;
}
header a {
    text-decoration: none;
    text-transform: uppercase;
    color: #226B90;
    font-weight: bold;
}
header .branding{
    float: left;
    margin: 0 0 35px 10px;
    /* Some design */
    text-shadow: 1px 1px 2px orange;
}
header .branding h1{
    margin:0;
}
header .current, header a:hover{
    color: #C48B19;
    text-shadow: 1px 1px 2px orange;
}

/* Left side */
.left-col {
    width: 26%;
    float: left;
    border: 1px solid;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
    background-color: #FAF8F3;
    margin-right: 12px;
}
.left-col  h1{
    padding-left: 10px;
}
.left-col  p{
    padding-left: 10px;
}
.left-col  i{
    padding-left: 10px;
}
.left-col  .read-more{
    color: #C48B19;
    text-shadow: 1px 1px 2px orange;
    float: right;
    text-decoration: none;
}

/* Right side */
aside{
    width: 25%;
    float: left;
    border: 1px solid;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
    background-color: #FAF8F3;
}
aside h1{
    padding-left: 10px;
}
aside form{
    padding: 0 10px 10px 10px;
}

/* Main section */
.mid-col{
    width: 46%;
    border: 1px solid;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
    background-color: #FAF8F3;
    float: left;
    margin-right: 12px;
}

.mid-col h1, .mid-col h2, .mid-col img, .mid-col p{
    padding-left: 10px;
}
.mid-col img{
    width: 96%;
}

/* footer */
footer{
    border: 1px solid;
    border-radius: 10px;
    background-color: #D0D8BE;
    padding:20px;
    margin:20px 0 0 20px;
}

当我看到输出时，我得到了这个重叠。我没有意识到如何解决它。我想我的HTML页面重构不好。

Answer 1

将clear: both添加到页脚的CSS（由于其上方的浮动元素，您需要它）

并从overflow: hidden标记中删除body。

body{
    background: #E1F9A8;
    font-family: "Arial";
    font-size: 16px;
    width: 80%;
    margin: auto;
    padding-bottom:60px;
}
ul{
    margin:0;
    padding:0;
}

/* Header */
header{
    border: 1px solid;
    border-radius: 10px;
    background-color: #D0D8BE;
    min-height: 75px;
    padding-top:30px;
    margin-top: 20px;
}
header nav{
    margin-top:10px;
}
header li{
    float: right;
    padding: 0 10px 10px 0;
    display: inline;
}
header a {
    text-decoration: none;
    text-transform: uppercase;
    color: #226B90;
    font-weight: bold;
}
header .branding{
    float: left;
    margin: 0 0 35px 10px;
    /* Some design */
    text-shadow: 1px 1px 2px orange;
}
header .branding h1{
    margin:0;
}
header .current, header a:hover{
    color: #C48B19;
    text-shadow: 1px 1px 2px orange;
}

/* Left side */
.left-col {
    width: 26%;
    float: left;
    border: 1px solid;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
    background-color: #FAF8F3;
    margin-right: 12px;
}
.left-col  h1{
    padding-left: 10px;
}
.left-col  p{
    padding-left: 10px;
}
.left-col  i{
    padding-left: 10px;
}
.left-col  .read-more{
    color: #C48B19;
    text-shadow: 1px 1px 2px orange;
    float: right;
    text-decoration: none;
}

/* Right side */
aside{
    width: 25%;
    float: left;
    border: 1px solid;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
    background-color: #FAF8F3;
}
aside h1{
    padding-left: 10px;
}
aside form{
    padding: 0 10px 10px 10px;
}

/* Main section */
.mid-col{
    width: 46%;
    border: 1px solid;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
    background-color: #FAF8F3;
    float: left;
    margin-right: 12px;
}

.mid-col h1, .mid-col h2, .mid-col img, .mid-col p{
    padding-left: 10px;
}
.mid-col img{
    width: 96%;
}

/* footer */
footer{
    border: 1px solid;
    border-radius: 10px;
    background-color: #D0D8BE;
    padding:20px;
    margin:20px 0 0 20px;
    clear: both;
}

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width = device-width">
    <meta name="description" content="Some training on web design">
    <meta name="keywords" content="web, design">
    <meta name="author" content="Houssem badri">
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/script.js"></script>
    <title>My Web design | Welcome</title>
  </head>
  <body>
      <header>
        <div class="branding">
          <h1>Some title</h1>
        </div>
        <nav>
          <ul>
        
        <li><a href="#">Contact us</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Services</a></li>
            <li><a class="current" href="#">Home</a></li>
          </ul>
        </nav>
      </header>
        
        <div  class="left-col">
          <section>
            <article>
              <h1>My first article</h1>
              <p>Some Text</p>
            </article>
            <article>
              <h1>My Second article</h1>
              <p>Some Text</p>
            </article>
          </section>
        </div>
        <div class="mid-col">
          <section>
            <h1> Main section title </h1>
            <p>Some Text</p>
          </section>
        </div>
      <aside role="complementary">
        <h1>Aside title</h1>
        <p> Some text </p>
      </aside>
      
      <footer>
          <h4>Copyright&copy <a href="#">blabla.com</a></h4>
      </footer>
  </body>
  </html>

Answer 2

我已经尝试过你的代码了，你所做的一切都是正确的，但你需要在页脚css部分添加一个小代码检查下面的css页脚代码

<!-- css -->
<style>
  footer
   {
     border: 1px solid;
     border-radius: 10px;
     background-color: #D0D8BE;
     padding: 20px;
     margin: 15px 0 0 0px;
     clear: both;
    }
 </style>

Answer 3

使用代码段中提供的css定义一个名为clearfix的类，它将清除结尾。你有浮动子div的地方，把它交给父div

＆＃13;

body{
    background: #E1F9A8;
    font-family: "Arial";
    font-size: 16px;
    width: 80%;
    margin: auto;
    overflow: hidden;
    padding-bottom:60px;
}
ul{
    margin:0;
    padding:0;
}

/* Header */
header{
    border: 1px solid;
    border-radius: 10px;
    background-color: #D0D8BE;
    min-height: 75px;
    padding-top:30px;
    margin-top: 20px;
}
header nav{
    margin-top:10px;
}
header li{
    float: right;
    padding: 0 10px 10px 0;
    display: inline;
}
header a {
    text-decoration: none;
    text-transform: uppercase;
    color: #226B90;
    font-weight: bold;
}
header .branding{
    float: left;
    margin: 0 0 35px 10px;
    /* Some design */
    text-shadow: 1px 1px 2px orange;
}
header .branding h1{
    margin:0;
}
header .current, header a:hover{
    color: #C48B19;
    text-shadow: 1px 1px 2px orange;
}

/* Left side */
.left-col {
    width: 26%;
    float: left;
    border: 1px solid;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
    background-color: #FAF8F3;
    margin-right: 12px;
}
.left-col  h1{
    padding-left: 10px;
}
.left-col  p{
    padding-left: 10px;
}
.left-col  i{
    padding-left: 10px;
}
.left-col  .read-more{
    color: #C48B19;
    text-shadow: 1px 1px 2px orange;
    float: right;
    text-decoration: none;
}

/* Right side */
aside{
    width: 25%;
    float: left;
    border: 1px solid;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
    background-color: #FAF8F3;
}
aside h1{
    padding-left: 10px;
}
aside form{
    padding: 0 10px 10px 10px;
}

/* Main section */
.mid-col{
    width: 46%;
    border: 1px solid;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
    background-color: #FAF8F3;
    float: left;
    margin-right: 12px;
}

.mid-col h1, .mid-col h2, .mid-col img, .mid-col p{
    padding-left: 10px;
}
.mid-col img{
    width: 96%;
}

/* footer */
footer{
    border: 1px solid;
    border-radius: 10px;
    background-color: #D0D8BE;
    padding:20px;
    margin:20px 0 0 20px;
}

.clearfix:before, .clearfix:after { 
  display: table; 
  content: " ";
}
.clearfix:after { 
  clear: both;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width = device-width">
    <meta name="description" content="Some training on web design">
    <meta name="keywords" content="web, design">
    <meta name="author" content="Houssem badri">
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/script.js"></script>
    <title>My Web design | Welcome</title>
  </head>
  <body>
      <header>
        <div class="branding">
          <h1>Some title</h1>
        </div>
        <nav>
          <ul>
        
        <li><a href="#">Contact us</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Services</a></li>
            <li><a class="current" href="#">Home</a></li>
          </ul>
        </nav>
      </header>
        <div class="clearfix">
        
        <div  class="left-col">
          <section>
            <article>
              <h1>My first article</h1>
              <p>Some Text</p>
            </article>
            <article>
              <h1>My Second article</h1>
              <p>Some Text</p>
            </article>
          </section>
        </div>
        <div class="mid-col">
          <section>
            <h1> Main section title </h1>
            <p>Some Text</p>
          </section>
        </div>
      <aside role="complementary">
        <h1>Aside title</h1>
        <p> Some text </p>
      </aside>
      
        </div>
      <footer>
          <h4>Copyright&copy <a href="#">blabla.com</a></h4>
      </footer>
  </body>
  </html>

＆＃13;

Html5 - 在主要内容上重叠页脚

3 个答案: