清除浮动的方法

最新推荐文章于 2022-07-01 13:08:14 发布

多多的小宝贝

最新推荐文章于 2022-07-01 13:08:14 发布

阅读量81

点赞数

本文链接：https://blog.csdn.net/weixin_45371730/article/details/119749245

版权

清除浮动：清除浮动元素带来的影响（浮动元素不占位置，没办法撑开父元素的高度）

方法一：设置高度

给浮动元素的父元素设置高度一般开发中高度会不确定，因此此方法不可取

方法二：额外标签法

在浮动元素的最后面添加一个空的块级元素，给这个块元素增加清除浮动的属性clear: both;

.clear {
clear: both;
}

方法三：单伪元素

给浮动元素的父元素增加类名 clearfix

/* 单伪元素：找到浮动元素的父亲，给父亲增加类名 clearfix
        前三个属性必写 */
   .clearfix::after {
   /* 伪元素必写属性 */
   content: "";
   /* 清除浮动 */
   clear: both;
   /* 伪元素after是一个行内元素，清除浮动要转为块元素 */
   display: block;
   /* 清除可能因为继承产生的高度 */
   height: 0;
   /* 清除可能因为继承产生的行高 */
   line-height: 0;
   /* 隐藏元素 */
   visibility: hidden;
   }

</div>

案例展示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>清除浮动-单伪元素</title>
    <style>
      .father {
        width: 1226px;

        margin: 0 auto;
        border: 5px saddlebrown solid;
      }
      .father .box {
        /* 加上浮动会脱离文档流，覆盖一部分shushu */
        float: left;
        width: 200px;
        height: 50px;
        background-color: pink;
      }
      .shushu {
        height: 100px;
        background-color: orange;
      }
      /* 额外标签法的进阶版*/
      /* 单伪元素：找到浮动元素的父亲，给父亲增加类名 clearfix */
      .clearfix::after {
        /* 伪元素必写属性 */
        content: "";
        /* 清除浮动 */
        clear: both;
        /* 伪元素after是一个行内元素，清除浮动要转为块元素 */
        display: block;
        /* 清除可能因为继承产生的高度 */
        height: 0;
        /* 清除可能因为继承产生的行高 */
        line-height: 0;
        /* 隐藏元素 */
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <div class="father clearfix">
      <div class="box">box1</div>
      <div class="box">box2</div>
    </div>
    <div class="shushu">叔叔</div>
  </body>
</html>

注释掉浮动

div.box这个盒子仍在标准流中，father的儿子box设置了高度，可以撑开盒子，此时效果：

为儿子添加了浮动属性之后，father的儿子.box会脱标，浮在标准流上方，脱标的.box不能撑开父盒子，通过浏览器检查会发现.father的宽度是默认浏览器的宽度，但高度只有10px(上边框5px+下边框5px=10px)

因为.box浮动不占位置,所以下面的标准流中的盒子（.shushu）会正常往上走，因此可以判断浮动对我们的页面产生了影响，我们需要清除浮动

方法四：双伪元素

给浮动元素的父元素增加类名 clearfix

/* 双伪元素 */
   /* .clearfix::before 可以解决margin塌陷问题*/
   .clearfix::before,
   .clearfix::after {
   content: "";
   display: table;
   }
   .clearfix::after {
   clear: both;
   }

方法五、overflow:hidden

给浮动元素的父元素设置属性overflow:hidden;

多多的小宝贝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动的方法

清除浮动：清除浮动元素带来的影响（浮动元素不占位置，没办法撑开父元素的高度）方法一：设置高度给浮动元素的父元素设置高度一般开发中高度会不确定，因此此方法不可取方法二：额外标签法在浮动元素的最后面添加一个空的块级元素，给这个块元素增加清除浮动的属性clear: both;.clear{ clear: both; }<divclass="clear"></div>方法三：单伪元素给浮动元素的父元素增加类名 clearfi...
复制链接

扫一扫