Question

我无法为使用clear的页脚添加上边距：两者。使用填充似乎解决了这个问题。但它破坏了页脚的顶部固体边界。

的index.php：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Study at Best</title>
    <link rel="stylesheet" rev="stylesheet" href="styles/layout.css" />
    <link rel="stylesheet" rev="stylesheet" href="styles/ddm.css" />
    <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.corner.js"></script>
    <script type="text/javascript" src="scripts/jquery.js"></script>
</head>
<body>
<div id="container">
    <div id="logo">
        <img class="imageCenter" src="images/logo.png" alt="Best School"/>
    </div>
    <div id="navigation">
        <?php include("navigation.html"); ?>    
    </div>
    <div id="header">

    </div>
    <div id="left-column">
        <h2>left-column</h2>
        <p>
        erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
        non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
        In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
        erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
        non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.  
        </p>
    </div>
    <div id="main-column">
        <h2>main-column</h2>
        <p>
        erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
        non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
        In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
        erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
        non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
        In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
        erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
        non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
        In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
        </p>
    </div>
    <div id="right-column">
        <h2>right-column</h2>
        <p>
        erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
        non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
        In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
        erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
        non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
        In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
        erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
        non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
        In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
        </p>
    </div>
    <?php include("footer.html"); ?>
</div>
</body>
</html>

footer.html：

<div id="footer">
<a href="#">Home |</a>
<a href="#">About Us |</a>
<a href="#">Contact Us |</a>
<a href="#">Menu Item 4 |</a>
<a href="#">Menu Item 5 |</a>
</div>

的style.css：

/*Default*/
* { margin: 0px; padding: 0px; }
body { font-size: 75%; font-family: Arial, Helvetica, sans-serif; }
ul { list-style: none }
a { outline: none; }
a img { border: none; }
h1 { font-size: 3.0em; }
h2 { 
    font-style: normal;
    font-size: 1.0em; 
    padding: 5px 10px;
    margin-bottom: 10px;
    color: #FFF;
    background-color: #A53030;
}

/*Tools*/
.textCenter { text-align: center; }
.imageCenter { margin-left: auto; margin-right: auto; display: block; }
.floatLeft: { float: left; }
.floatRight: { float: right; }
.clear { clear: both; }

/*Page*/
#container {
    width: 800px;
    margin: 0px auto;
}

#logo {
    width: 170px;
    height: 60px;
    margin: 5px;
}

#header {
    width: 800px;
    height: 200px;
    background-image: url('../images/best.jpg');
}

#navigation {
    color: white;
    width: 800px;
    background-color: #000;
}

#left-column {
    width: 150px;
    padding: 10px;
    float: left; 
    color: #FFF;
    background-color: #A53030;
}

#main-column {
    width:360px;
    padding: 10px;
    float: left; 
}

#right-column {
    width: 200px;
    padding: 10px;
    float: right; 
}

#footer {
    margin-top: 50px;
    width: 800px;
    border-color: #262626;
    border-top-style: solid; 
    border-width: medium;
    clear: both;
}

#footer ul li {
    list-style: none;
    float: left;
}

#footer ul li a {
    display: block;
    padding: 5px;
    width: auto;
    color: #000;
    font-weight: bold;
    text-align: center;
    text-decoration: none
}

#footer ul li a:hover {
    color: #49A3FF;
}

Answer 1

尝试使用填充。在浮动元素下，边缘被“吞噬”。

Answer 2

你需要清除左栏和右栏的浮动。

将overflow:hidden;添加到#container

Answer 3

艾米丽的回答非常有效！几天前我遇到了同样的问题，我找到了3种不同的方法来实现这一点（一种是HTML，两种是通过CSS）。

添加结构元素：这基本上需要在浮动元素之后添加一个空div，以便清除浮动元素。老式，不受欢迎，因为我们使用HTML来解决与外观相关的问题。在浮动元素后面添加一个属性为style =“clear：both”的div。

通过CSS添加内容：您可以使用容器：在CSS中的选择器后实现相同的功能。最佳解释：http://www.positioniseverything.net/easyclearing.html。

使用溢出：正如Emily所解释的那样：http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html。

Answer 4

保证金不适用于内联元素，只需将“display：inline-block”添加到页脚css，margin-top应该正常工作。

无法为使用clear的页脚添加上边距：两者

4 个答案: