DIV高度不起作用虽然有明确的：两者

Question

我有HTML和CSS

.a{
	margin: 0px 150px;
	box-shadow: 0px 0px 10px #888888;
	text-align: center;
}
.a:before , .a:after{
	content: "";
	clear: both;
	visibility: hidden;
}
.b {
	float: left;
	width: 50%;
}
.c {
	float: right;
	width: 50%;

<div class="a">
	<div class="b">
		<ul>
			<li>DATA 1</li>
			<li>DATA 1</li>
			<li>DATA 1</li>
		</ul>
	</div>
	<div class="c">
		<ul>
			<li>DATA 1</li>
			<li>DATA 1</li>
			<li>DATA 1</li>
		</ul>
	</div>
</div>

但是<div class="a">没有包围2 <div class="b">和<div class="c">，虽然我添加了明确的内容：两者？

现在我必须为div.a添加高度来解决这个问题，但我不想要这个。

为什么以及如何解决这个问题？

非常感谢你

Answer 1

您需要添加：

.a {
    overflow:auto;
}

让父级包含浮动的子元素。

<强> jsFiddle example

Answer 2

将overflow: hidden添加到父div CSS。父div会自动换行浮动。

检查这个小提琴：http://codepen.io/anon/pen/JoWjbK