出现浮动的原因：浮动元素碰到包含它的边框或者浮动元素的边框停留。
一.由于浮动元素不在文档流中，所以文档流的块框表现的就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。即框的文本内容会受到浮动元素的影响，会移动以留出空间，行框围绕浮动框。（实际上，可以创建浮动框使文本围绕图像）
清除方式：要阻止行框围绕在浮动框的外面，需要对包含这些行框的元素应用clear属性。clear属性值可以是left、right、both或none。
二.由于浮动元素脱离了文档流，所以包含浮动元素的父元素的高度无法被撑开，影响与父元素同级的元素。
清除方式：
举例：
<head>
...
<style>
.news {
width:100%;
background-color:#3FF;
border:solid 1px black;
}
.news img {
float:left;
}
.news p {
float:right;
}
</style>
</head>
<body>
<div class="news">
<img src="teacher.png" alt="teacher" />
<p>A paragraph</p>
</div>
</body>
1.在最后一个浮动元素后面添加空的div标签，并添加样式clear:both。迫使容器包围浮动元素。
<head>
...
<style>
.news {
width:100%;
background-color:#3FF;
border:solid 1px black;
}
.news img {
float:left;
}
.news p {
float:right;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div class="news">
<img src="teacher.png" alt="teacher" />
<p>A paragraph</p>
<!--在最后一个段落下面添加一个空元素并且清理它。让包围元素在视觉上包围浮动元素-->
<br class="clear" />
</div>
</body>
2.选择浮动父元素
<head>
...
<style>
.news {
width:100%;
background-color:#3FF;
border:solid 1px black;
float:left;
}
.news img {
float:left;
}
.news p {
float:right;
}
</style>
</head>
<body>
<div class="news">
<img src="teacher.png" alt="teacher" />
<p>A paragraph</p>
</div>
</body>//效果与上图相同
3.利用overflow属性的hidden或auto值的副作用，即会自动清理包含的任何浮动元素。
注：这个方法不适合所有情况，因为设置框的overflow属性会影响它的表现，这种方法在某些情况下会产生滚动条或者截断内容。
具体到本例的操作方法即：
.news {
background-color:#3FF;
border:solid 1px black;
overflow:hidden;
}//效果与上图相同
4.在使用CSS方法时，结合使用：after伪类和内容声明在浮动元素的父元素上添加class,在指定的现有内容的末尾添加新的内容。比如此例中我添加一个点，因为它是个非常小的不引人注意的字符。不希望新内容占据垂直空间或在页面显示，将height设置为0，将visibility设置hidden。将display设置为block。设置之后，对生成的内容进行清理。
具体到本例的操作方法即：
.clear:after {
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}//效果与上图相同
5.也可以为父级元素div添加height。
6.clearfix{overflow:hidden;zoom:1;}
在平常的css编写过程中，zoom:1能够比较神奇地解决ie下比较奇葩的bug。譬如外边距（margin）的重叠，譬如浮动的清除，譬如触发ie的 haslayout属性等等。
zoom是 设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。
当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，
运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。zoom现在已经被逐步标准化。
扫一扫
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
