css清除浮动的方法

2020-11-27 来源：我们爱旅游

css中的float：

float:left 左浮动

float:right 右浮动

float:none 不浮动

float:inherit 继承浮动(继承父元素浮动属性，如果父元素无浮动属性，inherit失效)

浮动产生哪些问题：1.父元素塌陷，没有高度。2.网页中的临近元素出现异位

清除浮动的几种方法：

1.手动给父元素添加高度缺点：如果子元素过多且数量不确定，设置较为复杂。

<!DOCTYPE html>
<html>
<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>
 <img src="1.jpg" />
 <p>some text</p>
 </div>
</body>
</html>

2.用clear属性

<!DOCTYPE html>
<html>
<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>
<img src="1.jpg" />
<p>some text</p>
<div></div>
</div>
</body>
</html>

3.给父元素添加overflow属性并结合zoom:1使用

<!DOCTYPE html>
<html>
<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>
 <img src="1.jpg" />
 <p>some text</p>
</div>
</body>
</html>

4.给父级元素添加浮动缺点：相邻元素位置异常

<!DOCTYPE html>
<html>
<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>
 <img src="1.jpg" />
 <p>some text</p>
</div>
</body>
</html>

5.使用:after伪元素

<!DOCTYPE html>
<html>
<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清除浮动的方法