清除浮动的三种方法

最新推荐文章于 2024-06-18 20:30:59 发布

pandaHe_Status

最新推荐文章于 2024-06-18 20:30:59 发布

阅读量5.3k

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_43321726/article/details/104880527

版权

前端专栏收录该内容

101 篇文章 1 订阅

订阅专栏

清除浮动的必备条件：1、父级没有高度 2、子盒子浮动了 3、影响布局了。
为什么要清除浮动？因为父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占位置，最后父级盒子高度为零时就会影响下面的
其中有四种方法清除，但有一种就够了（：after 伪元素）
1、额外标签法（隔墙法）：在浮动的子盒子末尾，加多一个空的标签<diV class=“clear" <／div>，然后在style中用clear:both 即可；
2、直接在所在父级的样式中加overflow：hidden （不推荐使用，无法解决溢出部分）
3、也是父级添加.clearfix（：after）（推荐使用）,再粘贴上下面代码即可

.clearfix:after {
            /*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        
        .clearfix {
            *zoom: 1;
            /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .clearfix:after {
            /*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        
        .clearfix {
            *zoom: 1;
            /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
        }
        
        .big {
            float: left;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        
        .footer {
            float: left;
            width: 200px;
            height: 500px;
            background-color: red;
        }
        
        .small {
            height: 200px;
            width: 200px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="fahter clearfix">
        <div class="big">big</div>

    </div>
    <div class="clearfix">
        <div class="footer"></div>
    </div>
    <div class="small"></div>
</body>

</html>

在这里插入图片描述
4.和三效果一样的，有三就足够了。

pandaHe_Status

关注

2
点赞
踩
5

收藏

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

清除浮动的必备条件：1、父级没有高度 2、子盒子浮动了 3、影响布局了。为什么要清除浮动？因为父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占位置，最后父级盒子高度为零时就会影响下面的其中有四种方法清除，但有一种就够了（：after 伪元素）1、额外标签法（隔墙法）：在浮动的子盒子末尾，加多一个空的标签<diV class=“clear" <／div>，然后在styl...
复制链接

扫一扫

专栏目录