如何清除浮动？

最新推荐文章于 2025-12-11 18:00:04 发布

原创最新推荐文章于 2025-12-11 18:00:04 发布 · 403 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

css、css3 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了浮动元素导致父级高度塌陷的问题，通过介绍两种解决方案：使用clearfix技巧和设置父元素overflow属性。方法一是利用clearfix清除浮动，方法二是通过隐藏溢出内容来修复。这两种方法可以帮助开发者理解和应对常见的布局挑战。

未清除浮动的影响

父级元素因为子级浮动引起的内部高度为0
父级元素的兄弟元素高度为0，其他样式也不能实现

代码

<body>
  <div class="father">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
  </div>
  <div class="friend">friend</div>
</body>

.child1,.child2,.friend{
  width:50px;
  height:50px;
}

.child1{
  float:left;
  border:1px solid blue;
}

.child2{
  float:left;
  border:1px solid green;
}

.friend{
  border:1px solid red;
}

.father{
  border:1px solid black;
}

方法1：给父元素加上 .clearfix

代码

<body>
  <div class="father clearfix">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
  </div>
  <div class="friend">friend</div>
</body>

.child1,.child2,.friend{
  width:50px;
  height:50px;
}

.child1{
  float:left;
  border:1px solid blue;
}

.child2{
  float:left;
  border:1px solid green;
}

.friend{
  border:1px solid red;
}

.father{
  border:1px solid black;
}

.clearfix:after{
     content: '';
     display: block; /*或者 table*/
     clear: both;
 }
.clearfix{
  zoom: 1; /* IE 兼容*/
}

效果图

方法2：给父元素加上 overflow:hidden

代码

<body>
  <div class="father">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
  </div>
  <div class="friend">friend</div>
</body>

.child1,.child2,.friend{
  width:50px;
  height:50px;
}

.child1{
  float:left;
  border:1px solid blue;
}

.child2{
  float:left;
  border:1px solid green;
}

.friend{
  border:1px solid red;
}

.father{
  border:1px solid black;
  overflow:hidden
}