css浮动

来源：互联网发布：解压缩软件下载免费版编辑：程序博客网时间：2024/04/29 08:18

一、元素浮动之后布局的变化

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="right">Right</div>

</div>

/*使用firebug等调试工具可以看到，父元素的高度不再为零了*/

/*由于IE6和IE7不支持:after伪类，因此需要添加zoom: 1兼容代码*/

1 0