Question

我搞砸了什么？我尝试给我的包装纸左右边框，但似乎没有。

<body>
    <div class="wrapper">

    <div class="topInfo">
        <p>some text</p>
    </div>

    </div>
</body>

Answer 1

由于您在课程float:right上使用topInfo，请尝试将overflow:hidden;放在课程wrapper上。

检查 DEMO 。

Answer 2

由于浮动元素。从#topInfo中删除它或将其添加到#wrapper。

根据非浮动父级，浮动元素没有宽度/高度。我建议您删除浮动并学习如何正确使用display: inline-block 这在开始时比较困难，但从长远来看会节省你的时间。

Answer 3

你必须在topInfo div之后clear:both。否则你的“包装”不会包装。

Answer 4

如果使用float元素，则需要清除元素。出于这个原因，现在人们建议使用display：inline-block。在您的情况下，您可以通过两种方式解决它。

Answer1 ：在包装器的内容div末尾添加clear div。

 <div class="wrapper">

    <div class="topInfo">
        <p>some text</p>
   </div>
    <div style="clear:both"></div>
 </div>

答案2：保持您的HTML结构。但是像下面那样更改CSS类。你需要使用绝对值来处理正确的定位。

 .topInfo{
   width: 280px;
    background: red;
   color: #fff;
   display:inline-block;
   padding: 0 15px 0 15px;
   margin-top: 20px;
   }