目录
非 VIP 用户可前往公众号回复“css”进行免费阅读
给浮动元素的祖先元素加高度
给 div 写一个 clear:both; 属性（margin 失效）
clear:both; 隔墙法
clear:both; 内墙法
父级 div 定义伪类:after 和 zoom（推荐使用）
非 VIP 用户可前往公众号回复“css”进行免费阅读
给浮动元素的祖先元素加高度
当一个元素要浮动时，其祖先元素有高度才能限制住浮动元素的范围。就像是有高度的盒子才能把浮动元素 “关住”。
备注：这种方法不推荐普遍使用，仅在布局高度固定的情况下可以考虑使用。
示例代码如下：
css:
<style type="text/css">
li{
float: left;
width: 100px;
height: 100px;
background-color: skyblue;
text-align: center;
margin-right:10px;
}
div{
height:120px;
}
</style> html:
<body>
<div>
<ul>
<li>div1-li</li>
<li>div1-li</li>
</ul>
</div>
<div>
<ul>
<li>div2-li</li>
<li>div2-li</li>
</ul>
</div>
</body> 运行结果：
给 div 写一个 clear:both; 属性（margin 失效）
在网页制作中，高度 height 属性不常被直接设置，因为很多时候元素的高度是由内容自动撑起来的。当给 div 设置 clear:both; 属性来清除浮动时，会出现一个严重的问题，即 margin 属性会失效。
clear:both; 隔墙法
此方法通过一个具有 clear:both; 属性（.cl 类）并且有一定高度（.h16 类）的 div 元素，如：
<div class=
