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

【问题标题】：My border style in CSS doesn't cover the whole body我在 CSS 中的边框样式没有覆盖整个身体
【发布时间】：2015-09-28 11:20:55
【问题描述】：

我试着把它放进去

   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 />

边框只是围绕图像并在我放置后结帐向左飘浮在 CSS 中的其他 ID 之一中。如果我删除浮动，那么边框可以正常工作。

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

【问题讨论】：

jsbin.com/pemefu/1/edit?html,css,js,output
您可以将身体的高度明确设置为像素或更好的 vh。例如：body{border-style:double;边距：0；填充：0；高度：100vh;}

标签： html css border

【解决方案1】：

您面临的问题是body（和 html）没有设置高度，它将扩展以包含未浮动的元素。只要你float 内部元素，body 高度就会下降，崩溃。

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

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

.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

【讨论】：