清除浮动的4种方式

最新推荐文章于 2023-05-05 20:37:32 发布

殘血★戰狼王

最新推荐文章于 2023-05-05 20:37:32 发布

阅读量183

点赞数 1

分类专栏： HTML&CSS 文章标签： html

本文链接：https://blog.csdn.net/WLIULIANBO/article/details/110500179

版权

HTML&CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

清除浮动的4种方式

为什么要清除浮动？

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

如下:

给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子。

在这里插入图片描述

当我给内部两个盒子加上float属性的时候

底部的footer盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了

在这里插入图片描述

清除浮动的方法（最常用的4种）

一、额外标签法：给谁清除浮动，就在其后额外添加一个空白标签。

优点：通俗易懂，书写方便。（`不推荐使用`）

缺点：添加许多无意义的标签，结构化比较差。

给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）


<div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
</div>


.clear{
        clear:both;
    }

二、父级添加overflow方法：可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

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

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


.fahter{
    width: 400px;
    border: 1px solid deeppink;
    overflow: hidden;
}

注意：别加错位置，是给父亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）

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

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

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

在这里插入图片描述


.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="father clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

四、使用before和after双伪元素清除浮动：（`较常用推荐`）

在这里插入图片描述


<style>
            .father{
                border: 1px solid black;
                *zoom: 1;
            }
            .clearfix:after,.clearfix:before{
                   content: "";
                   display: block;
                   clear: both;
               }
               .big ,.small{
                width: 200px;
                height: 200px;
                float: left;
               }
               .big{
                background-color: red;
               }
               .small{
                background-color: blue;
               }
        </style>
   <div class="father clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
   </div>
    <div class="footer"></div>

</div>

优点：代码更简洁

补充

父级div定义 height：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

殘血★戰狼王

关注

1
点赞
踩
1

收藏

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

清除浮动的4种方式为什么要清除浮动？清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题如下:给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子。当我给内部两个盒子加上float属性的时候底部的footer盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了清除浮动的方法（最常用的4种）一、额外标签法：给谁清除浮动，就在其后额外添加一个空白标签。优点：通俗易
复制链接

扫一扫