css清除浮动

2018-06-24 01:58:18来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:打字效果动画实现方法

下一篇:浅谈BFC与高度塌陷