清除浮动方法

原创已于 2022-03-24 22:55:12 修改 · 569 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css

于 2022-03-24 22:54:16 首次发布

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了清除浮动影响的三种常见方法：1) 空标记法，通过在浮动元素后添加带有`clear:both`样式的空div来恢复正常布局；2) after伪对象，利用CSS的`:after`选择器创建一个内部伪元素并清除浮动；3) overflow属性，设置元素的`overflow`为`hidden`，触发BFC（块格式化上下文）来清除浮动。这些方法有助于解决浮动元素导致的父元素高度塌陷问题。

清除浮动

1、空标记法

在浮动元素之后添加空标记，并对该标记应用 ”clear：both“ 样式，即可清除浮动的产生的影响。

<style>
  .one,.two,.three{
    float: left;
    width: 100px;
    height: 100px;
    margin: 10px;
    background: red;
  }
  .box{
    border: 1px solid #ccc;
    background: blue;
  }
  .four{
    clear: both;  /* 清除左右两侧浮动影响，按原来块级元素显示 */
  }
</style>
  
<body>
  <div class="box">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
  </div>
</body>

2、after伪对象

实现原理类似于第一种方法，区别是前者是在结构中插入一个空标记，而后者利用其为伪类::after在元素内部增加一个类似于空标记的效果。

<style>
  .one,.two,.three{
    float: left;
    width: 100px;
    height: 100px;
    margin: 10px;
    background: red;
  }
  .box{
    border: 1px solid #ccc;
    background: blue;
  }
  
  .box::after{ 
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
  }
</style>
  
<body>
  <div class="box">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
</body>

3、overflow属性

为什么overflow能清楚浮动？overflow：hidden 触发了 BFC。

<style>
    .one,.two,.three{
      float: left;
      width: 100px;
      height: 100px;
      margin: 10px;
      background: red;
    }
    .box{
      border: 1px solid #ccc;
      background: blue;
      overflow: hidden;
    }
</style>

<div class="box">
   <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
 </div>