css清除浮动float

最新推荐文章于 2022-03-29 15:05:17 发布

吕小花

最新推荐文章于 2022-03-29 15:05:17 发布

阅读量227

点赞数

分类专栏： css 文章标签： css清除浮动float

本文链接：https://blog.csdn.net/weixin_41972041/article/details/88973273

版权

css 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

清除浮动float

什么是浮动
- 为什么要清除浮动
- 清除浮动的几种方法

什么是浮动

元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。在CSS中，通过float属性来定义浮动，其基本语法格式如下：（浮动就是用来布局的）
在这里插入图片描述

为什么要清除浮动

如图所示：当我们不给父亲宽高的时候，子盒子会撑开父盒子在这里插入图片描述
当我们给子盒子加了左浮动的时候，就会出现以下情况，两个子盒子浮动起来了，父盒子被挤上去了，而紫色盒子也占了原来子盒子的位置，原因是因为父盒子没有宽高，当子盒子浮动起来，也就不在父盒子里占位置了，所以父盒子现在的高度是0。
在这里插入图片描述
这个时候，如果想要不给父亲宽高的同时还要实现下图这样的布局，就要用到清除浮动：

清除浮动的几种方法

1、clear属性清除浮动
在css中，clear属性可以清除浮动，clear有三个值，分别是left（清除左侧浮动的影响）、right（清除右侧浮动的影响）、both（清除两侧浮动的影响）。
语法格式如下：
选择器{clear：属性值；}
注：常用方法是在浮动的元素末尾添加一个空标签，例如我在small盒子下面添加了一个空标签，给其添加了clear属性。
在这里插入图片描述
2、父级添加overflow属性添加浮动
给父级添加overflow为hidden|auto|scroll 都可以实现。

代码如下：

.father {
	border: 1px soild red;
	overflow:hidden;
}

3、伪元素after清除浮动
使用方法，需要在父类里写一个多类名clearfix，然后给这个类写样式。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  .father {
   border: 1px solid #f00;
  }
  .clearfix:after {
   content: "";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
  }/**必须全部写**/
  .clearfix {
  *zoom: 1;/**IE6不支持after，所以这样写，*代表IE7以下的版本识别**/
  }
  .big {
   width: 200px;
   height: 100px;
   background-color: #974876;
   float: left;
  }
  .small {
   width: 100px;
   height: 200px;
   background-color: #ccc;
   float: left;
  }
 .footer {
   height: 50px;
   width: 500px;
   background-color: red;
  }
 </style>
</head>
<body>
 <div class="father clearfix">
  <div class="big">1</div>
  <div class="small">2</div>
 </div>
 <div class="footer">2</div>
</body>
</html>
}

4、伪元素before，after清除浮动
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  .father {
   border: 1px solid #f00;
  }
  .clearfix:before,.clearfix:after { 
     content:"";
     display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
  }
  .clearfix:after {
   clear:both;
  }
  .clearfix {
   *zoom: 1;
  }
  .big {
   width: 200px;
   height: 100px;
   background-color: #974876;
   float: left;
  }
  .small {
   width: 100px;
   height: 200px;
   background-color: #ccc;
   float: left;
  }
  .footer {
   height: 50px;
   width: 500px;
   background-color: red;
  }
 </style>
</head>
<body>
 <div class="father clearfix">
  <div class="big">1</div>
  <div class="small">2</div>
  <!-- <div class="clean"></div> --><!-- 空标签 -->
 </div>
 <div class="footer">2</div>
</body>
</html>