清除浮动方法

神龙大熊

已于 2022-03-24 22:55:12 修改

阅读量360

点赞数 1

分类专栏： CSS 文章标签：前端 css

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

本文链接：https://blog.csdn.net/weixin_45925567/article/details/123723601

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

清除浮动

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>