CSS清除浮动

最新推荐文章于 2021-06-10 08:51:28 发布

无名氏*

最新推荐文章于 2021-06-10 08:51:28 发布

阅读量68

点赞数

本文链接：https://blog.csdn.net/qq_44848423/article/details/112346135

版权

浮动元素可能导致容器高度塌陷，影响布局。清除浮动是为了避免背景显示、边框撑开和margin/padding问题。解决方案包括设定固定高度、使用clear属性、伪类元素如clearfix或overflow属性。这些方法能确保内容不溢出并保持布局正常。

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

什么是清除浮动？

在非 IE 浏览器（如 Chrome）下，当容器的高度为auto，且容器的内容中有浮动（即CSS配置有float:left | right）的元素，在这种情况下，容器的高度不会自动伸长以适应内容的高度，所以里面的内容溢出到容器外面而影响（甚至破坏）布局，这个现象称为浮动溢出。
为了避免这个现象的发生，消除其带来的负面影响而进行的一些CSS处理，称为清除浮动。

浮动带来的问题

1、背景无法显示

由于浮动的设置，如果对父级设置了CSS 背景颜色或CSS背景图片，由于父级元素将不能被撑开，所以导致CSS背景不能显示。

2、边框无法撑开

如果父级设置了CSS边框 border 属性，由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin、padding 设置值无法正确显示

由于浮动的设置，导致父级子级之间设置了 margin 或 padding 属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

看下面的例子:

    <style>
        .wrapper {
            border: 1px solid black;
        }

        .wrapper div {
            float: left;
            margin-left: 10px;
            width: 100px;
            height: 100px;
            background-color: coral;
        }

    </style>
</head>

<body>
    <div class="wrapper">
        <div class="inner1"></div>
        <div class="inner2"></div>
    </div>

</body>

在这里插入图片描述

解决方法

1、给父元素设置一定的高度height

显示的给父元素设置高度。但是，这种方法太过僵硬，一般在开发过程中不建议自设高度。

2、使用CSS的 clear

clear 属性规定元素的哪一侧不允许其他浮动元素。

clear可能的值：

left      在左侧不允许浮动元素。

right    在右侧不允许浮动元素。

both    在左右两侧均不允许浮动元素。

none    默认值。允许浮动元素出现在两侧。

inherit  规定应该从父元素继承 clear 属性的值。

3、使用伪类元素

上面的例子，添加一个属性:

<style>
        /* 清除浮动 */
        .clearfix::after,
        .clearfix::before{
            content: '';
            display: block;
            clear: both;
        }
         .clearfix{
        *zoom: 1;
        }

 </style>
    <div class="wrapper clearfix">
        <div class="inner1"></div>
        <div class="inner2"></div>
    </div>

4、使用`overflow`属性

<style>
   .wrapper {
       border: 1px solid black;
       overflow: hidden;
   }
</style>

这种情况之所以可以解决浮动问题，是因为该属性的设置开启的BFC。