CSS清除浮动

最新推荐文章于 2025-04-10 11:10:14 发布

你要多照镜子

最新推荐文章于 2025-04-10 11:10:14 发布

阅读量127

点赞数 1

文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_45270158/article/details/109324686

版权

在父元素不设置height的时候我们就需要清除浮动

下面不清除浮动的效果
在这里插入图片描述
清除浮动的效果

1.隔墙法

<!-- <!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>
<body>
  <div class="nav"> 
    <div class="float-itemleft"></div>
    <div class="float-itemleft"></div>
    <div class="clear"></div>//隔墙法
  </div>
    <div class="test-box"></div>
</body>
<style>
  .nav
  {
    width: 800px;
    margin: auto;
  }
.float-itemleft
{
  float: left;
  width: 200px;
  height: 50px;
  border: 1px solid;
  margin-left: 20px;
  background:blueviolet;
}
.clear{
  clear: both;
}
.test-box{
  width: 100%;
  height: 50px;
  background:black ;
}
</style>
</html>

2.给父级添加overflow: hidden

<!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>
<body>
  <div class="nav"> --给父级添加overflow: hidden
    <div class="float-itemleft"></div>
    <div class="float-itemleft"></div>
  </div>
  <div class="test-box"></div>
</body>
<style>
  .nav
  {
    width: 800px;
    margin: auto;
    overflow: hidden;
  }
.float-itemleft
{
  float: left;
  width: 200px;
  height: 50px;
  border: 1px solid;
  margin-left: 20px;
  background:blueviolet;
}
.test-box{
  width: 100%;
  height: 50px;
  background:black ;
}
</style>
</html> -->

3.给父级添加伪类

</html>
<!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>
<body>
  <div class="nav clear">  <!--给父级添加伪类 -->
    <div class="float-itemleft"></div>
    <div class="float-itemleft"></div>
  </div>
  <div class="test-box"></div>
</body>
<style>
  .nav
  {
    width: 800px;
    margin: auto;
    overflow: hidden;
  }
.float-itemleft
{
  float: left;
  width: 200px;
  height: 50px;
  border: 1px solid;
  margin-left: 20px;
  background:blueviolet;
}
.test-box{
  width: 100%;
  height: 50px;
  background:black ;
}
.clear:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear{ /*IE6,7可以不使用*/
  zoom: 1;
}
</style>
</html>