
上QQ阅读APP看书,第一时间看更新
The float method
We can prevent elements from collapsing by floating the container to the left or to the right. Let's do this; let's add float: left or float: right to our secondary-section. Either will work:
.secondary-section { margin-bottom: 50px; background-color: #7EEEAF; float: left; }
Once we save this, we will see that we have the green background, so the collapse is no longer taking place, but the obvious problem is we've floated to the left. We wanted this div to be centered:

This method has an obvious drawback. There are some circumstances and some situations where it would be a perfect solution, but in this one, there's an obvious problem: we are no longer centered. Remove float: left from your CSS and explore my favorite, and I think the best, solution: the clearfix hack.