css清除浮动

qwguanbin

于 2020-07-13 15:26:37 发布

阅读量139

点赞数

CC 4.0 BY-SA版权

文章标签： css css3

本文链接：https://blog.youkuaiyun.com/qwguanbin/article/details/107317634

本文介绍了在CSS中解决浮动元素导致布局问题的三种常见方法：添加空标签并设置样式clear:both；在父级元素使用overflow:hidden；以及利用伪元素:after进行清除。这些技巧对于前端开发者来说非常实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1-添加空标签，并设置样式：clear:both

<div style="clear: both;"></div>

2-在要清除浮动的父级元素，添加样式：overflow:hidden

<style>
    .wrap{
      overflow: hidden;
    }
    .left,.right{
      width: 200px;
      height: 200px;
    }
    .left{
      float: left;
      background: #344;
    }
    .right{
      float: right;
      background: #456565;
    }
</style>
<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
    <div style="width: 300px;height: 300px;background: #999;"></div>
</div>

3-要在清除浮动的父级元素添加伪元素:after，并设定样式

<style>
    .wrap:after{
      content: "";
      display: block;
      clear: both;
    }
    .left,.right{
      width: 200px;
      height: 200px;
    }
    .left{
      float: left;
      background: #344;
    }
    .right{
      float: right;
      background: #456565;
    }
</style>
<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
</div>