CSS解决容器背景不能撑开的问题

在开发中；有时候给容器设置了背景；发现他不会被撑开，而是是显示在第一行的位置，不管里边放多少容器和内容，如下图这种情况：

如何让这个容器显示正确的效果呢？

第一解决方法就是在背景容器使用overflow:hidden; 其实这个方法也是正确的，但是如果使用这个方法，你会发现搜索输入框如果是下拉的情况是显示不全的，只显示显示一半。
第二解决方法就限制个最小高度；min-height，这个方法如果是全局都要改的话，你会发现很悲剧；因为有的页面可能有一行条件框，有的有两行、有的有三行，每个模块的都有不一样的高度，每个页面都要单独去控制，工作量太大了。

前面一、二都不是最理想的解决方法，解决这个问题我们可以使CSS的伪类元素:before和:after，结合content: " "来实现，简单又粗暴的方式，也不用全系统去修改页面。也不像方法二一样影响到下拉选择框，代码如下：

```css
.screen-term {
    border: 1px solid #dee5ec;
    padding-top: 10px;
    margin-top: 0px;
    background: #f4f5f9; //这里设置背景没有被撑开
}

.screen-term:before, .screen-term:after {
    content: " ";
    display: table;
}