HTML5+CSS3_9_清除浮动和解决外边距塌陷

最新推荐文章于 2024-08-13 16:28:32 发布

泠泠七弦上111

最新推荐文章于 2024-08-13 16:28:32 发布

阅读量125

点赞数 3

分类专栏： HTML5+CSS3 文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/2301_81057751/article/details/140937232

版权

HTML5+CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

效果图

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除浮动和解决外边距塌陷</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    ul {
      width: 240px;
      background-color: #ffe4c4;
      /* 清楚浮动方式一：给父元素设置如下属性 */
      /* overflow: hidden; */
    }

    /* 清除浮动方式二：给父元素添加 clearfix 类名 */
    .clearfix::before,
    .clearfix::after {
      content: "";
      display: table;
    }

    .clearfix::after {
      clear: both;
    }

    /* 推荐方式二，既能解决外边距塌陷问题，又能清除浮动
    before解决外边距塌陷问题
    after清除浮动 */

    ul li {
      float: left;
      margin: 5px;
      width: 50px;
      height: 100px;
      background-color: #0ff;
      list-style: none;
    }

    div {
      width: 300px;
      height: 100px;
      background-color: #a52a2a;
    }
  </style>
</head>

<body>
  <ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div></div>
</body>

</html>