CSS清除浮动

浮动元素可能导致容器高度塌陷,影响布局。清除浮动是为了避免背景显示、边框撑开和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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值