Question

我想给#footer中的元素p赋予一个上边距值，但是clearfix不起作用，并且边距在其父元素之外不断折叠，为什么？下面的代码，＃fotter和clearfix类位于代码thx的最后。

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Challenge 1</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="main.css">    
  </head>
  <body>
    <div  id="wrap">
      <div id="header">
        <h1>Shakespear.net</h1>
      </div>
      <div id="nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Writings</a></li>
          <li><a href="#">Sonnets</a></li>
          <li><a href="#">Life Story</a></li>
          <li><a href="#">About Shakespear.net</a></li>
        </ul>
      </div>
      <div id="sidebar">
        <h2>Sonnet Index</h2>
        <ul>
          <li><a href="#">Sonnet #1</a></li>
          <li><a href="#">Sonnet #6</a></li>
          <li><a href="#">Sonnet #11</a></li>
          <li><a href="#">Sonnet #15</a></li>
          <li><a href="#">Sonnet #18</a></li>
        </ul>
      </div>
      <div id="content">
        <h1>Shakespeare's Sonnet #18</h1>
        <p>This is one of the most famous of the sonnets. It is referenced
            in the film Dead Poets Society and gave names to the band The
            Darling Buds and the book and television series The Darling Buds
            of May. Read it and weep!</p>
        <ul>
          <li>Shall I compare thee to a summer's day?</li>
          <li>Thou art more lovely and more temperate:</li>
          <li>Rough winds do shake the darling buds of May,</li>
          <li>And summer's lease hath all too short a date:</li>
        </ul>
      </div>
      <div id="footer" class="clearfix">
        <p class="copyright">See the 
        <a href="http://en.wikipedia.org/wiki/Shakespeare%27s_Sonnets">
        Shakespeare's sonnets</a> Wikipedia article for more information
        </p>
      </div>
    </div>
  </body>
</html>

CSS

html, body, #wrap {
    height: 100%;
}
ul {
    margin: 0;
    padding: 0;
}
#wrap {
    max-width: 450px;
    margin: auto;
}

/************ header ************/

#header {
    background-color: #B5B67D;
    height: 16%;
}
#header h1{
    margin: 58px 34px 0;
    float: right;
    font-size: 21px;
}

/************ nav ************/

#nav {
    background-color: #689D59;
    min-height: 4%;
    border-bottom: 2px dashed white;
    box-sizing: border-box;
}

#nav li{
    display: inline-block;
    list-style: none;
    font-size: 10px;
    margin: 0 4px 0 14px;
}
#nav a{
    text-decoration: none;
}   

/************ sidebar ************/

#sidebar {
    float: right;
    background-color: #B5B67D;
    width: 23%;
  min-height: 70%;
}
#sidebar h2 {
    font-size: 8px;
    margin-left: 5px;
}
#sidebar li {
    font-size: 10px;
    margin-left: 20px;


}

/************ content ************/ 

#content {
    float: right;
    background-color: #506449;
    width: 77%;
    min-height: 70%;
}
#content h1{
    font-size: 19px;
    margin: 18px 0 0 10px;  
}
#content p{
    font-size: 9px;
    margin: 10px
}
#content li{
    list-style: none;
    font-size: 12px;
    text-align: center;
}

/************ footer ************/

#footer {
    background-color: #689D59;
    min-height: 10%;
    clear: both;
  font-size: 12px;
}
#footer p{
  text-align: center;
    margin-top: 351px;  
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Answer 1

请试试这个：

使用填充而不是边距：

#footer p{
  text-align: center;
    padding-top:20px
}

Answer 2

clearfix方法旨在清除元素的子元素。您正尝试将其应用于footer元素，而不是浮动的元素。你可以尝试一些事情：

将sidebar和content部分换成自己的div并将clearfix应用于该部门。

https://jsfiddle.net/va9q1mw8/1/

完全废弃明确修正案，并在<div style="clear:both"></div> div之后但content

footer

https://jsfiddle.net/va9q1mw8/

Answer 3

你的clearfix在页脚后面清除了。你想在它之前清楚。你现在拥有的只会阻止下一个元素崩溃的边缘。

将clearfix放在应该遵循浮点数的最后一个元素上。在您的情况下，这将工作：

<div id="content" class="clearfix">

Clearfix无效

3 个答案: