CSS伪元素::after清除浮动样式

最新推荐文章于 2024-05-10 00:53:46 发布

kadenqxwang

最新推荐文章于 2024-05-10 00:53:46 发布

阅读量377

点赞数 2

分类专栏： CSS常用样式汇总文章标签： css 前端

本文链接：https://blog.csdn.net/g841805/article/details/137592725

版权

CSS常用样式汇总专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一.代码

1.清除前

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
<style>
  li{
    width: 100px;
    height: 100px;
    float: left;
    background: blueviolet;
    border:1px solid;
    margin-right: 10px;
  }
  ul{
    list-style: none;
    border: 1px solid black;
  }
</style>
</html>

2.清除后

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
<style>
  li{
    width: 100px;
    height: 100px;
    float: left;
    background: blueviolet;
    border:1px solid;
    margin-right: 10px;
  }
  ul{
    list-style: none;
    border: 1px solid black;
  }
  ul::after{
    content: '';
    display: block;
    clear: both;
  }
</style>
</html>

二.效果

1.清除前