css清除浮动的方法-css教程-PHP中文网

css清除浮动的方法

一个新手

发布： 2017-10-24 09:06:53

原创

1887人浏览过

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>
    @@##@@
    <p>some text</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/11160">
                            <img src="https://img.php.cn/upload/webcode/000/000/008/176517360228330.jpg" alt="简灰服装商城整站 For SHOPEX">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/11160">简灰服装商城整站 For SHOPEX</a>
                            <p>SHOPEX简灰服装商城整站源码下载。 安装方法:1.解压上传程序至网站根目录.. 访问:域名/bak.(用户名:admin 密码:123456)2.进入帝国备份王后,配置数据库数据库信息.选择-www.taomoban.net目录.还原数据库.3.修改FTP目录下的config/config.phpphp 数据库连接信息.4.登陆网站后台--清空缓存..5.删除bak文件夹 后台:shopadm</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="简灰服装商城整站 For SHOPEX">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/11160" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="简灰服装商城整站 For SHOPEX">
                        </a>
                    </div>
                
  </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>
@@##@@
<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>
    @@##@@
    <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>
    @@##@@
    <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">
    @@##@@
    <p>some text</p>
</div>
</body>
</html>

登录后复制