清除浮动方法-CFANZ编程社区

清除浮动方法

无愠色 2022-03-24 阅读 45

清除浮动

1、空标记法

<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伪对象

<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属性

<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>

0 条评论