温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS基础之清除浮动

发布时间:2020-07-01 21:56:55 来源:网络 阅读:668 作者:fchengjin 栏目:开发技术

CSS基础之清除浮动

  本人前端菜鸟一枚,在学习 CSS 过程中发现网上流传的教程参差不齐,要么内容不够详细,要么方法就是错的。本文是在我参考了许多前辈经验的基础上编写的,如有错误的地方,请各位大牛不吝赐教。以下是我总结的三种行之有效而且比较简单实用的方法。


一、父级div定义伪类 :after


代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS基础之清除浮动</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        #header,#footer{
            width: 100%;
            height: 50px;
            background: #3ac;
        }
        .father{
            margin: 10px auto;
        }
        .float_left{
            float: left;
            background: #a3f;
            width: 70%;
            height: 450px;
        }
        .float_right{
            float: right;
            background: #f3f;
            width: 30%;
            height: 300px;
        }
        .father:after{
            display: block;
            content: "";
            clear: both;
        }
    </style>
</head>
<body>
<div id="header">头部</div>
<div class="father">
    <div class="float_left">left</div>
    <div class="float_right">right</div>
</div>
<div id="footer">底部</div>
</body>
</html>

其中关键的部分为:

 .father:after{
            display: block;
            content: "";
            clear: both;
        }

  这里 content 的值尽量写为空或者不写,如果写其他值,则需添加多余的代码,举例如下:

 .father:after{
          display: block;
          height: 0;
          visibility: hidden;
          content: "清除浮动";
          clear: both;
        }

虽然也能清除浮动,但多了一些不必要的代码。


二、在结尾处添加空的div标签


原理跟使用 :after 伪类一样,都是通过 clear: both; 来实现的。示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS基础之清除浮动</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        #header,#footer{
            width: 100%;
            height: 50px;
            background: #3ac;
        }
        .father{
            margin: 10px auto;
        }
        .float_left{
            float: left;
            background: #a3f;
            width: 70%;
            height: 450px;
        }
        .float_right{
            float: right;
            background: #f3f;
            width: 30%;
            height: 300px;
        }
        .clr{
            display: block;
            content: "";
            clear: both;
        }
    </style>
</head>
<body>
<div id="header">头部</div>
<div class="father">
    <div class="float_left">left</div>
    <div class="float_right">right</div>
    <div class="clr"></div>
</div>
<div id="footer">底部</div>
</body>
</html>


三、父元素定义 overflow:auto;


HTML结构跟上面一样,CSS样式部分如下:

*{
    margin:0;
    padding: 0;
}
#header,#footer{
    width: 100%;
    height: 50px;
    background: #3ac;
}
.father{
    margin: 10px auto;
    overflow: auto;
}
.float_left{
    float: left;
    background: #a3f;
    width: 70%;
    height: 450px;
}
.float_right{
    float: right;
    background: #f3f;
    width: 30%;
    height: 300px;
}

这种方法使用起来很简单,但具有一定的局限性。内部宽高超过父级div时,会出现滚动条。 


以上就是清除浮动的三种方法。另外如果父元素本身也是浮动的话,则父元素内就无需清除浮动。要根据实际情况选择可行的方法。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI