一、元素浮动之后布局的变化
1、对于块级元素,在默认情况下,宽度是100%,一旦设置浮动,它的宽度会根据内容自动调整。
2、设置浮动后,元素不仅在y轴上浮动起来,在z轴上,也浮动起来。默认情况下,父元素的高度会根据子元素的内容自动进行调整,而如果我们将子元素设置为浮动,父元素的高度就会变为0.
3、虽然浮动的元素脱离了文档流,但是里面的内容仍然占据空间,会根据相对位置进行布局。子元素浮动,父元素不浮动,父元素没有宽度;子元素有浮动,父元素也浮动,父元素有宽度;
二、清除浮动的影响
1、在需要的地方添加定义clear:both的空标签
html body span.clear {
background: none;
border: 0;
clear: both; /*这句是重点,其他都是兼容性代码*/
float: none;
font-size: 0;
margin: 0;
padding: 0;
overflow: hidden;
visibility:hidden;
width: 0;
height: 0;
}
/*在需要清除浮动的元素后面添加<div class="clear"></div>也可以消除浮动的影响*/
2、对父元素使用:after伪类清除浮动
.clearfix:after {
content:"";
display: block;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}
.left {
float: left
}
.right {
float: right
}
<div class="div1 clearfix">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
/*使用firebug等调试工具可以看到,父元素的高度不再为零了*/
/*由于IE6和IE7不支持:after伪类,因此需要添加zoom: 1兼容代码*/