清除浮动影响4种方法

最新推荐文章于 2023-10-21 21:50:27 发布

考拉菜鸟

最新推荐文章于 2023-10-21 21:50:27 发布

阅读量250

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/chunmeizhang_88/article/details/111578580

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    li {
      float: left;
      margin-right: 10px;
      background-color: sandybrown;
      list-style: none;
    }
    ul {
      background-color: springgreen;
    }

/* 4. 使用伪元素::after ::before 设置clear:both,将左右的浮动都一次性清除影响*/
    .clearfix::after,
    .clearfix::before {
      display: block;
      content: '';
      visibility: hidden;
      clear: both;
    } 

    .clearfix {
      /* 兼容ie6,7 */
      *zoom: 1;
    }

  </style>
</head>
<body>
 <!--  子元素浮动,脱离标准流,导致父元素失去高度, 而引起父元素兄弟元素在标准流的布局-->
  <!-- css样式不要写在行内,此处为了方便查看 -->
  <div>
      <!-- 1. 在子元素最后添加额外标签, 清除浮动影响, 标签增加dom开销-->
       <!-- clear: both/left/right, 实际只用到clear: both-->
    <ul class="box1">
      <li>555</li>
      <li>555</li>
      <li>555</li>
      <li>555</li>
      <li>555</li>
      <li style="clear: both;"></li>
    </ul>
  </div>
  <br>
  <div>
    <!-- 2. 给父元素设置高度 -->
    <ul class="box2" style="height: 30px;">
      <li>555</li>
      <li>555</li>
      <li>555</li>
      <li>555</li>
      <li>555</li>
    </ul>
  </div>
  <div>
    <!-- 3. 使用overflow: hidden/scroll/auto 清除浮动, 当子元素过多,可能会使子元素被隐藏 -->
    <ul class="box3" style="overflow: hidden;">
      <li>555</li>
      <li>555</li>
      <li>555</li>
      <li>555</li>
      <li>555</li>
    </ul>
  </div>
  <div>
    <ul class="box4">
      <li>555</li>
      <li>555</li>
      <li>555</li>
      <li>555</li>
      <li>555</li>
    </ul>
  </div>
  <div>
    <ul class="box5 clearfix">
      <li>555</li>
      <li>555</li>
      <li>555</li>
      <li>555</li>
      <li>555</li>
    </ul>
  </div>
  <div>
    <ul class="box6">
      <li>555</li>
      <li>555</li>
      <li>555</li>
      <li>555</li>
      <li>555</li>
    </ul>
  </div>
</body>
</html>

考拉菜鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动影响4种方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> li { float: left;
复制链接

扫一扫