HTML伪列周围的边框_Html_Css_Border

HTML伪列周围的边框

html css

HTML伪列周围的边框,html,css,border,Html,Css,Border,我正在开发一个webapp，我想在浮动div周围加上边框，我称之为假列，因为缺少更好的描述。我知道这是非常基本的，但出于某种原因——也许是不称职——我无法让它发挥作用程序如下：我左右浮动两个div。这些div嵌套在另一个div中，我想在其周围加一个边框守则： <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <tit

我正在开发一个webapp，我想在浮动div周围加上边框，我称之为假列，因为缺少更好的描述。我知道这是非常基本的，但出于某种原因——也许是不称职——我无法让它发挥作用

程序如下：我左右浮动两个div。这些div嵌套在另一个div中，我想在其周围加一个边框

守则：

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>StackOvervlow</title>
    <style type="text/css" media="screen">
      body {
        width: 900px;
      }
      #wrapper {
        border: 2px solid gray;
      }
      #container {
        width: 600px;
        float: left;
        background-color:#678;
      }
      #sidebar {
        width: 200px;
        float: right;
        background-color: bisque;
      }
      #footer {
        clear: both;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="header"></div>
    <div id="wrapper">
      <div id="container">
        <p>Placeholder Text.</p>
        <p>Placeholder Text.</p>
      </div>
      <div id="sidebar">
        <p>Placeholder Text.</p>
      </div>
    </div>
    <div id="footer">
      <p>Some footer stuffs</p>
    </div>
  </body>
</html>


StackOvervlow
身体{
宽度：900px；
}
#包装纸{
边框：2倍纯色灰色；
}
#容器{
宽度：600px；
浮动：左；
背景色：#678；
}
#边栏{
宽度：200px；
浮动：对；
背景色：深蓝色；
}
#页脚{
明确：两者皆有；
文本对齐：居中；
}
占位符文本
占位符文本
占位符文本
一些页脚的东西

请解释为什么边界显示为一条线，而不是像预期的那样环绕两个封闭的div。如果你能提出解决这个问题的方法，我将不胜感激

谢谢。

只需添加：

overflow: hidden;

到

#wrapper

的CSS，演示位于：

边框折叠为一行的原因是浮动元素从文档流中移除，这意味着它们基本上不占用父元素内的空间，而父元素没有内容，因此会折叠。

溢出：隐藏使父元素环绕其子元素。不过，老实说，我不太明白为什么会这样
不过，值得一读CSS浮动的复习/入门，以及它们行为的指针。
当您浮动元素时，它不会像内联元素那样占用空间
解决方案是在底部放置一个块级元素，该元素具有“清除两个”属性：

请参阅此处的详细信息：
这也是一个解决方案；但是如果我这样做的话，当我想要重构时，会有一些额外的标记可能会让人困惑。非常感谢。是的，将有额外的标记-但这将适用于所有浏览器。我建议阅读David答案中的链接，有很多解决方案，都有各自的优点和缺点。这是一篇好文章，并链接到其他好文章。