浮动高度塌陷,清除浮动

最新推荐文章于 2025-12-05 07:37:55 发布

原创最新推荐文章于 2025-12-05 07:37:55 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

样式的编写专栏收录该内容

1 篇文章

订阅专栏

要求：清除浮动

<!DOCTYPE html>
<html>
<head>
<title>清除浮动</title>
<style type="text/css">
  .outer {
    width: 200px;
    background: tomato;
    margin: 10px;
    position: relative;
  }
  .inner {
    height: 100px;
    width: 100px;
    background: pink;
    margin: 10px;
    float: left;
  }
  /* 伪元素 */
  .outer1::after {
    content: '';
    display: block;
    clear: both;
  }
  /* 创建 BFC */
  .outer2 {
    overflow: hidden;
  }
</style>
</head>
<body>
<div class="outer outer1">
  <div class="inner"></div>
</div>
<div class="outer outer2">
  <div class="inner"></div>
</div>
</body>
</html>