Clearfix不起作用
Clearfix不起作用
提问于 2016-03-31 19:03:59
我想给#脚注中的元素p提供一个上边距值，但是清除不起作用，边距一直在父元素之外崩溃，为什么？下面的代码，#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;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2016-03-31 19:32:14
您的清除将清除在页脚后面。你想要在它之前清空。您现在拥有的内容只会防止下一个元素崩溃的范围。
在最后一个应服从浮标的元素上放置清除值。在你的例子中，这样做是可行的：
<div id="content" class="clearfix">Stack Overflow用户
发布于 2016-03-31 19:08:01
请试试这个：
用填充物代替毛边：
#footer p{
text-align: center;
padding-top:20px
}Stack Overflow用户
发布于 2016-03-31 19:20:08
清除方法用于清除元素的子元素。您正在尝试将其应用于footer元素，而不是浮动的元素。你可以尝试一些事情：
- 将
sidebar和content部分封装到自己的div中，并将clearfix应用于该div。
https://jsfiddle.net/va9q1mw8/1/
- 彻底取消清除，并在
<div style="clear:both"></div>div之后立即添加content，但在footer之前添加
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36341605
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号