目录
非 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=