因为子元素的浮动，导致父元素的边框变成一条线，如下：
<style>
.container{
width: 500px;
border: 1px solid #ccc;
}
p{
float: left;
}
</style>
<body>
<div class="container">
<p>1111111111111</p>
<p>22222222222</p>
<p>333333</p>
</div>
</body>
解决方法1：在父元素的样式中加 overflow:auto;
.container{
width: 500px;
border: 1px solid #ccc;
overflow: auto;
}
解决方法2:在父元素中加一个清除浮动的子元素div。清除左浮动：clear:left; 清除有浮动：clear:right; 清除两边浮动：clear:both;
<div class="container">
<p>1111111111111</p>
<p>22222222222</p>
<p>333333</p>
<div style="clear:left;"></div>
</div>
标签：浮动,清除,clear,元素,边框,一条线 From： https://www.cnblogs.com/zhaofen/p/17595889.html