我在 CSS 中的边框样式没有覆盖整个 body

Question

我试过把它放在

   body{ border-style: double;}

还有

   #form{border-style: double;}

但边框只覆盖了一部分

      <!DOCTYPE html>

      <html xmlns="http://www.w3.org/1999/xhtml">
      <head runat="server">
       <title>Checkout</title>
      <link rel="stylesheet" type="text/css" href="StyleSheet.css" />
      </head>
       <body>
      <form id="form" runat="server">
         <div>
            <img src="banner.jpg" />
             <br /><br />
             <span id ="Checkout">Checkout</span><br /><br />

边框刚好绕过图像并在我放置后结帐 float:left CSS 中的其他 ID 之一。如果我删除浮动然后边框工作正常。

请不要记下答案，我是一名学生，我正在逐步学习。因此，我们将不胜感激。

Answer 1

您面临的问题是 body（和 html）没有设置高度，它会扩展以包含未浮动的元素。一旦你float内层元素，body高度就会下降，塌陷。

您需要正确清除（浮动元素的）包含父元素上的浮动
您可以：

将overflow:auto设置为父DIV元素
或使用特殊的 class（同样在父元素上）：

.clearFix:before,
.clearFix:after {
    content: " ";
    display: table;
}
.clearFix:after {
    clear: both;
}

此外，如果您想直接向 body 添加边框，考虑到 html, body 已设置为 100%，以便使底部边框可见，您可能需要添加

box-sizing:border-box;

到您的 body 元素。

jsBin demo of body with visible bottom border

我在 CSS 中的边框样式没有覆盖整个 body

My border style in CSS doesn't cover the whole body

html

css

border