清除浮动的方法

前端小菜羊

于 2020-12-10 16:46:24 发布

阅读量86

点赞数

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

本文链接：https://blog.csdn.net/weixin_47124862/article/details/110955079

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、clear：both

clear属性运用于浮动元素后面的元素

clear元素取值：left、right、both

通常会使用clear：both

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #father
    {
        width: 300px;
        border: 1px solid black;

    }
    #first,#second
    {
        width:100px;
        height: 50px;
        border: 1px solid red;
    }
    #first{float: left;}
    #second{float:right;}
    .clear{clear: both;}
    </style>
</head>
<body>
    <div id="father">
        <div id="first"></div>
        <div id="second"></div>
        <div class="clear"></div>

    </div>
</body>
</html>

这种方法会破坏HTML到代码的予以，所以这种方法并不太好

二、overflow：hidden

overflow：hidden应用于浮动元素的父元素，不是当前的浮动元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #father
    {
        overflow: hidden;
        width: 300px;
        border: 1px solid black;
    }
    #first,#second
    {
        width: 100px;
        height: 50px;
        border:1px solid red;
    }
    #first{float: left;}
    #second{float:right;}
    </style>
</head>
<body>
    <div id="father">
        <div id="first"></div>
        <div id="second"></div>
    </div>
</body>
</html>

overflow：hidden相对于使用clear：both来说，可以避免添加多余的标签，并且还不会破坏HTML的语义结构。

同时它会隐藏超出父元素的内容部分，有时并不能达到我们的预期。

三、：：after伪元素

语法：

.clearfix{*zoom:1;}

.clearfix::after

{

clear:both;

content:"";

display:block;

height:0;

visibility:hidden;

}

：：after是伪元素，在css3动画效果中使用得比较多。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    .clearfix{*zoom:1;}
    .clearfix::after
    {
        clear: both;
        content: "";
        display: block;
        height: 0;
        visibility: hidden;
    }
    #father
    {
        width: 300px;
        border:1px solid black;
    }
    #first,#second
    {
        width: 80px;
        height: 40px;
        border:1px solid red;
    }
    #first{float: left;}
    #second{float: right;}
    </style>
</head>
<body>
    <div id="father" class="clearfix">
        <div id="first"></div>
        <div id="second"></div>
    </div>
</body>
</html>

在实际开发中，更倾向于使用这种方法

前端小菜羊

关注

0
点赞
踩
0

收藏

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

一、clear：bothclear属性运用于浮动元素后面的元素clear元素取值：left、right、both通常会使用clear：both<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale=1.0"> <title&gt
复制链接

扫一扫

专栏目录