欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS -- 清除浮动的几种常用方法

程序员文章站 2024-01-28 21:56:58
...

清除浮动

本文总结自,B站-pink老师(鸣谢)

  1. 为什么要清除浮动?

由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为零时就会影响下面的标准流盒子。

  • 由于浮动元素不占有原文档流的位置,所以它会对后面的元素排版产生影响。

CSS -- 清除浮动的几种常用方法

  1. 清除浮动语法
选择器{clear: 属性值;}

属性及描述:

  • 清除浮动的策略是:闭合浮动
属性值 描述
left 不允许左侧有浮动元素(清除左侧浮动的影响)
right 不允许右侧有浮动元素(清除右侧浮动的影响)
both 同时清除左右两侧浮动的影响

清除浮动方法

  1. 额外标签法:也称为隔墙法,W3C推荐。

  2. 父级添加overflow属性

  3. 父级添加after伪元素

  4. 父级添加双伪元素

1. 额外标签法

注意:添加的必须是块级元素才行!!!

  • 在浮动元素的末尾添加一个空的标签,例如
<div style="clear:both"></div>
或者
</br>
  • 优点:通俗易懂,书写方便

  • 缺点:添加许多无意义标签,结构比较差

2. 父元素添加overflow

可以给父元素添加overflow属性,将其属性值设置为hiddenauto或者scroll

  • 优点:代码简洁

  • 缺点:无法显示溢出的部分

3. after伪元素

:after方式是额外标签法的升级版。也是给父元素添加。

.clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
  • 优点:没有增加标签,结构更简单

  • 缺点:需要照顾低版本浏览器

  • 代表网站:百度、淘宝、网易。

4. 双伪元素

给父元素添加样式

.clearfix:before,
      .clearfix:after {
        content: "";
        display: table;
      }
      .clearfix:after {
        clear: both;
      }
  • 优点:结构更简单

  • 缺点:需要照顾低版本浏览器

  • 代表网站:小米、腾讯。

总结

为什么需要清除浮动?

  • 父级没高度

  • 子盒子浮动了

  • 影响下面布局。

清除浮动方式 优点 缺点
额外标签法(隔墙法) 通俗易懂,书写方便 添加许多无意义标签,结构化较差。
父级overflow:hidden; 书写简单 溢出部分会隐藏,不显示
父级after伪元素 结构语义化正确 IE6-7兼容性问题
父级双伪元素 结构语义化正确 IE6-7兼容性问题

代码演示:

<!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>
      /* 4.双伪元素清除浮动 */
      .clearfix:before,
      .clearfix:after {
        content: "";
        display: table;
      }
      .clearfix:after {
        clear: both;
      }
      /* 3. :after伪元素 
      .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }*/
      /* 父级无法看到浮动的子元素,高度坍缩为零 */
      .box {
        width: 800px;
        border: 1px solid blue;
        margin: 0 auto;
        /*overflow: hidden; 2.给父元素添加overflow样式属性来清除浮动*/
      }
      /* 浮动的元素不占有原位置 */
      .damao {
        float: left;
        width: 300px;
        height: 200px;
        background-color: purple;
      }
      .ermao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .footer {
        height: 200px;
        background-color: black;
      }
      /*  1.额外标签法清除浮动
      .clear {
        clear: both;
      } */
    </style>
  </head>
  <body>
    <div class="box clearfix">
      <div class="damao">大毛</div>
      <div class="ermao">二毛</div>
      <!-- 额外标签法:在最后一个浮动的盒子后面添加块标签 -->
      <!-- <div class="clear"></div> -->
    </div>
    <div class="footer"></div>
  </body>
</html>

样式:
CSS -- 清除浮动的几种常用方法

相关标签: Java Web css