什么是清除浮动？为什么要清除浮动？如何清除浮动? 真的很简单～

最新推荐文章于 2024-02-06 17:21:22 发布

吃遍全世界的咖喱

最新推荐文章于 2024-02-06 17:21:22 发布

阅读量1k

点赞数 2

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_43140637/article/details/123979227

版权

很多新手学习CSS的时候，都会遇到的一个问题，为什么我用float浮动布局的时候，布局会变得很乱，到底是哪里出了问题？

首先要弄明白什么是父容器高度塌陷，意思就是一个父容器里面装了很多个子容器，父容器的高度被子容器挤没了，因为子容器用了css的float浮动，造成了父容器高度塌陷，那如何解决这个问题，我们先往下看。

清除浮动前：父容器高度塌陷

div1是父容器，div2和div3是子容器，子容器分别用了float：left和float：right

清除浮动后：父容器高度正常

那么如何避免父容器高度塌陷？

1、给父容器一个合适的高度

缺点：看起来好像很好解决，但是有时候你写页面的时候，内容是动态的，根本不能把高度固定写死，我们只能让高度默认height:100%；

2、给父容器添加一个样式overfloat:hidden;

缺点：超出的内容会被隐藏，这个确实也不是最好的解决方案。

3、给父容器里的最后新增一个div元素，给它添加一个样式clear:both;

缺点：莫名其妙的为了清除浮动还得写多一个div元素，给html的代码制造垃圾一样，代码看起来不够简洁。

4、给父容器的样式添加一个伪元素:after 🌟 （如果有同学对伪元素不了解，可以往下翻看最下面，有简单介绍）

缺点：多写几句css代码，反正平时也不会浏览css的代码，不影响html的代码下成功清除浮动。

伪元素如何写？

以下的css代码需要死记硬背，别怕其实很好记，记不住记在笔记本上

.clearfix:after{/*伪元素是行内元素正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行，这里只是兼容老版本浏览器，不想兼容老版本浏览器可以不写*/
}

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<style>
  .div1 {
    border: 2px solid red;
    padding: 10px;
    /* overflow: hidden; 第二种方法*/
    /* height: 500px; 第一种方法*/
  }

  /* //第四种方法，推荐 */
  .clearfix:after {
    /*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  .clearfix {
    *zoom: 1;
    /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
  }

  .div2 {
    width: 300px;
    height: 300px;
    background-color: green;
    float: left;
  }

  .div3 {
    width: 300px;
    height: 300px;
    float: right;
    background-color: cyan;
  }

  /* .clear 第三种方法{
      clear: both;
    } */
</style>

<body>
  <div class="div1 clearfix">
    大家好，我是div1
    <div class="div2">
      大家好，我是div2
    </div>
    <div class="div3">
      大家好，我是div3
    </div>
    <!-- <div class="clear"></div> 第三种方法-->
  </div>
</body>

</html>

什么是伪元素？

伪元素真的很容易理解，首先你要知道为什么叫伪元素，它看起来像一个真正的元素，其实它不是，它只是css生成的一个元素，并不会在你的html的代码中出现。

你可以把它当成每一个元素的class类都自带的一种css隐藏功能，那么:after 伪元素写在父容器的class上就是，在父容器的最尾端添加一个元素。

详细可看百度百科，当然有:after也有:before，感兴趣的同学可以去看看

:after_百度百科

:before_百度百科

吃遍全世界的咖喱

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
什么是清除浮动？为什么要清除浮动？如何清除浮动? 真的很简单～

很多新手学习CSS的时候，都会遇到的一个问题，为什么我用float浮动布局的时候，布局会变得很乱，到底是哪里出了问题？首先要弄明白什么是父容器高度塌陷，意思就是一个父容器里面装了很多个子容器，父容器的高度被子容器挤没了，因为子容器用了css的float浮动，造成了父容器高度塌陷，那如何解决这个问题，我们先往下看。清除浮动前：父容器高度塌陷div1是父容器，div2和div3是子容器，子容器分别用了float：left和float：right清除浮动后：父容器高度正常...
复制链接

扫一扫