css清除浮动的方式

最新推荐文章于 2024-07-18 20:18:47 发布

爱在旅途

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量48

点赞数

分类专栏： CSS 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_54018434/article/details/131419814

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如果我们在给页面元素设置样式的时候，未给父盒子设置高度，当我在父盒中添加元素的时候，父盒子就会被自动撑开，那是因为浏览器会自己计算父盒子里面元素的高度，那么这个高度也可以理解为父盒子的高度，但是如果给子元素设置float属性，子元素变成浮动元素就会脱离文档流。由于浏览器只计算文档流内的元素高度，因此子元素一旦脱离文档流，父盒子的高度就会变成为0，这就是所谓的高度塌陷。

<style>
   .div1{
       background-color: aqua;
       border: 1px solid black;
    }
   .div2{
       float: left;
       width: 300px;
       height: 300px;
         background-color: blueviolet;
       }
</style>

<body>
    <div class="div1">
        <div class="div2">
            <h1>666666</h1>
        </div>
    </div>
</body>

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。

以下是清除浮动的三种方式

方式1 给父盒子添加一个高度，该方式要先确定子元素的高度，如果子元素的高度不确定则该方式不适用，而且写死高度，不够灵活，还容易出现样式的问题；不值得推荐。

方式2 给父盒子设置overflow: hidden；把父盒子变成BFC((Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。）BFC可以把父盒子变成一个独立的渲染区，这样浮动元素的高度也会被浏览器计算。

优点： 简单、代码少、浏览器支持好

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。

<style>
   .div1{
         background-color: aqua;
         border: 1px solid black;
         overflow: hidden;
        }
   .div2{
         float: left;
          width: 300px;
         height: 300px;
         background-color: blueviolet;
        }     
</style>

<body>
    <div class="div1">
        <div class="div2">
            <h1>666666</h1>
        </div>
    </div>
</body>

方式3 在父盒子内最下方添加一个空的div标签，并给这个空的标签添加clear样式,样式属性为clear:both. （推荐）。

<style>
     .div1{
         background-color: aqua;
         border: 1px solid black;
         /* overflow: hidden; */
     }
     .div2{
         float: left;
         width: 300px;
         height: 300px;
         background-color: blueviolet;
     }
     .clear{
         clear: both;
     }
</style>
<body>
    <div class="div1">
        <div class="div2">
            <h1>666666</h1>
        </div>
        <div class="clear"></div>
    </div>
</body>

方式4 使用after伪类 :after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，zoom(IE专有属性)可解决ie6,ie7浮动问题（较常用推荐）

优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点： 由于IE6-7不支持：after，使用zoom：1

<style>
    .div1{
        background-color: aqua;
        border: 1px solid black;
    }
    .div2{
         float: left;
        width: 300px;
        height: 300px;
        background-color: blueviolet;
    }
    .clear:after{
        content: "";
        display: block;
        /* height: 0; */
        clear:both;
        visibility: hidden;
    }
    .clear{
       zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
</style>


<body>
    <div class="div1">
        <div class="div2">
            <h1>666666</h1>
        </div>
        <div class="clear"></div>
    </div>
</body>

爱在旅途

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css清除浮动的方式

如果我们在给页面元素设置样式的时候，未给父盒子设置高度，当我在父盒中添加元素的时候，父盒子就会被自动撑开，那是因为浏览器会自己计算父盒子里面元素的高度，那么这个高度也可以理解为父盒子的高度，但是如果给子元素设置float属性，子元素变成浮动元素就会脱离文档流。由于浏览器只计算文档流内的元素高度，因此子元素一旦脱离文档流，父盒子的高度就会变成为0，这就是所谓的。方式1 给父盒子添加一个高度，该方式要先确定子元素的高度，如果子元素的高度不确定则该方式不适用，而且写死高度，不够灵活，还容易出现样式的问题；
复制链接

扫一扫