css中的float：
float:left 左浮动
float:right 右浮动
float:none 不浮动
float:inherit 继承浮动(继承父元素浮动属性，如果父元素无浮动属性，inherit失效)
浮动产生哪些问题：1.父元素塌陷，没有高度。2.网页中的临近元素出现异位
清除浮动的几种方法：
1.手动给父元素添加高度 缺点：如果子元素过多且数量不确定，设置较为复杂。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>清除浮动</title> ???<style type="text/css"> ?/*给父级元素添加高度 */ ?*{ ???padding:0; ???margin:0; ?} ??.news { ??background-color: red; ??border: solid 1px black; ??height:200px; ??/*设置高度，如果去掉高度元素塌陷*/ ?????????} ?.news img { ?float: left; ?} .news p { ?float: right; ?} ?????</style></head><body> ?<div class="news"> ???<img src="1.jpg" /> ???<p>some text</p> ?</div></body></html>2.用clear属性
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>清除浮动</title> ???<style type="text/css"> ?/* 清除浮动 clear*/ ?*{ ???margin:0; ???padding:0; ?}.news { ?background-color: red; ?border: solid 1px black; ?}.news img { ?float: left; ?}.news p { ?float: right; ?} .content{ ?clear:both;/*两边都清除浮动*/ ?} ????</style></head><body> <div class="news"><img src="1.jpg" /><p>some text</p><div class="content"></div></div></body></html>3.给父元素添加overflow属性并结合zoom:1使用
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>清除浮动</title> ???<style type="text/css"> ???/* 给父级元素添加overflow:hidden; */ ???*{ ????????margin:0; ????????padding: 0; ????} .news { ?background-color: red; ?border: solid 1px black; ?overflow: hidden; /*溢出隐藏*/ ?zoom:1;/*兼容IE浏览器*/ ?}.news img { ?float: left; ?}.news p { ?float: right; ?} ???</style></head><body> ???<div class="news"> ???<img src="1.jpg" /> ???<p>some text</p></div></body></html>4.给父级元素添加浮动 缺点：相邻元素位置异常
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>清除浮动</title> ???<style type="text/css"> ?/* 给父级元素添加浮动 */ ?*{ ???margin:0; ???padding:0; ?} .news { ?background-color: red; ?border: solid 1px black; ?float: left; ?/* 给父级元素添加浮动 */ ?}.news img { ?float: left; ?}.news p { ?float: right; ?} ???</style></head><body> ???<div class="news"> ???<img src="1.jpg" /> ???<p>some text</p></div></body></html>5.使用:after伪元素
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>清除浮动</title> ???<style type="text/css"> ?/* 使用伪元素：after添加浮动 */ ?*{ ???margin:0; ???padding:0; ?} .news { ?background-color: red; ?border: solid 1px black; ???}.news img { ?float: left; ?}.news p { ?float: right; ?} ?.clearfix:after{ ???content: "\0020";/*在父容器的结尾处放一个空白字符*/ ???display: block; ???height: 0; /*让这个空白字符不显示出来*/ ???clear: both; ?} ?/* 兼容IE6和IE7,触发haslayout */ ?.clearfix{ ???zoom:1; ??} ????</style></head><body> ???<div class="news clearfix"> ???<img src="1.jpg" /> ???<p>some text</p></div></body></html>css清除浮动
原文地址：http://www.cnblogs.com/yyfyl/p/7717158.html