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: " 020";/*在父容器的结尾处放一个空白字符*/ 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>