当divOuter内有一个divInner,divInner如果设置了浮动后,divOuter的大小会变得不受divInner影响,此刻就需要消除divInner的浮动效果
方法:
给divOuter设置overflow: hidden
overflow: hidden; 是指溢出部份隐藏,但却能清除浮动。
给divOuter设置高度
这需要在知道divInner高度的情况下
使用clear属性
clear是让自己在布局的时候无视周围(left/right/both)元素的浮动效果。
在上面案例的divInner旁边加一个空div,无内容,设置clear: left; 则该div会无视自身左边的元素的浮动效果进行布局。那么因为div的特性会自动换行,所以该div会去到了下一行,但因为其内容是空的,所以高度是0,那么此时divOuter的高度会因为空div不是浮动的,那么就会变成divInner的高度再加上空div的高度(0px),也就消除了浮动。
.divInner {
float: left;
background: #654321;
padding: 20px;
}
<div class="divOuter">
<div class="divInner">divInner</div>
<div style="clear: left;"></div>
</div>
使用伪类设置clear
该方法跟上面的clear: left;一致,只不过不是手动添加div,而是使用伪类添加。
.divInner {
float: left;
background: #654321;
padding: 20px;
}
.clearFloat:after{
content: "";
display: block;
height: 0;
clear: left;
}
<div class="divOuter clearFloat">
<div class="divInner">divInner</div>
</div>
这样,只要加了clearFloat这个class,他的子元素末尾就会自动添加一个clear: left;的空的div
上面的方案对现代浏览器是可行的。但如果要兼容IE6、7的话,那就应该使用hasLayout的方式了,这里不做讲解。