通过隔墙法,我们可以很方便的清楚浮动。下面我们再来介绍一种清楚浮动的方法:内墙法.
仍然是同样的例子。内墙法和隔墙法很相似,区别在于将这堵墙dis放在div1里面。通过设置这堵墙的clear:both来清除浮动,同样设置该div的height:10px,使div1与div2之间出现间距。
运行结果:
那么大家可能会有疑问,内墙法和隔墙法看起来有什么区别,那为什么要使用内墙法呢?
既然在隔墙法之后又出现内墙法,这就说明内墙法必然有比隔墙法优越的特点。
我们可以设置
.div1{
background-color: green;
}
运行之后,可以看到
可以看出此时div1是有高度的。
下面我们再来给大家举个例子来说明内墙法的优点
运行之后:
我们看到这页面上只显示p标签,而父元素div却没有显示出来。那这是为什么呢?
是因为父亲是不能被浮动的儿子撑出高度的。由于p标签设置了浮动,所以就不能撑出父元素div的高度,那么如何解决这种问题呢?
我们可以在div内部再设置一个div
html代码:
css代码:
.cl{
clear: both;
}
运行结果: