CSS——浮动带来的影响及清除浮动

最新推荐文章于 2024-07-09 17:43:36 发布

忘川(๑ت๑)

最新推荐文章于 2024-07-09 17:43:36 发布

阅读量808

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_69059702/article/details/126023614

版权

本文探讨了浮动元素如何导致子元素布局问题，通过实例展示了子元素脱离标准流和父元素塌陷的现象。介绍了三种清除浮动的方法：设置父元素高度、双伪元素法和overflow属性。确保读者掌握消除浮动影响的实用技巧。

摘要由CSDN通过智能技术生成

1. 浮动带来的影响：如果子元素浮动了，就脱离标准流不占位，此时的子元素无法撑开没有设置告诉的子元素。

<body>
    <div class="father">
        <div class="child1"></div>
    </div>
</body>

<style>
        .father{
            border: 2px solid #000;
        }
        .father .child1{
            float: left;
            width: 60px;
            height: 60px;
            background-color: pink;
        }
    </style>

显示效果：子盒子脱标，父盒子塌陷。

2.清除浮动的方法：

①给父盒子设置高度，

<style>
        .father{
            width：100px;
            height:100px;
            border: 2px solid #000;
        }
        .father .child1{
            float: left;
            width: 60px;
            height: 60px;
            background-color: pink;
        }
    </style>

② 双伪元素清除法

.clearfix::before,
  .clearfix::after {
    content: "";
    display: table;
  }
  .clearfix::after {
    clear: both;
  }

③ 给父元素设置overflow：hidden；

不管使用以上那种方法，都清除了浮动给盒子带来的影响。

忘川(๑ت๑)

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS——浮动带来的影响及清除浮动

浮动给盒子带来的影响及解决办法
复制链接

扫一扫