zoukankan html css js c++ java

CSS给元素清除浮动影响的方法，--最全四种方法

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动方法一</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 500px;
            background-color: pink;
        }
        .son1,
        .son2{
            height: 200px;
            width: 200px;
            float: left;
        }
        .son1{
            background-color: blue;
        }
        .son2{
            background-color: skyblue;
        }
        .box{
            width: 600px;
            height: 200px;
            background-color: #000;
        }
        .clearfix{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <!-- 在浮动元素的末尾添加一个空的标签  -->
        <div class="clearfix"></div>
    </div>
    <div class="box"></div>
</body>
</html>

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动方法二</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 500px;
            background-color: pink;
            overflow: hidden;   /* 给父元素添加    overflow:hidden/auto/scroll */
        }
        .son1,
        .son2{
            height: 200px;
            width: 200px;
            float: left;
        }
        .son1{
            background-color: blue;
        }
        .son2{
            background-color: skyblue;
        }
        .box{
            width: 600px;
            height: 200px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <div class="box"></div>
</body>
</html>

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动方法三</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 500px;
            background-color: pink;
            overflow: hidden;   /* 给父元素添加    overflow:hidden/auto/scroll */
        }
        .son1,
        .son2{
            height: 200px;
            width: 200px;
            float: left;
        }
        .son1{
            background-color: blue;
        }
        .son2{
            background-color: skyblue;
        }
        .box{
            width: 600px;
            height: 200px;
            background-color: #000;
        }
        /*给父元素添加类clearfix*/
        .clearfix:after{ 
            content: ".";              /* 这里尽量写点内容，否则在IE6-7会出现间隙 */
            dispaly: black;            /* 转换为块级元素 */
            height: 0;                 /* 高度为0 */
            clear: both;               /* 清除浮动 */
            visibility: hidden;        /* 隐藏盒子 */
        }
        .clearfix{
            *zoom: 1;    /* 这是专门给IE6-7做的清除浮动 */
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <div class="box"></div>
</body>
</html>

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动方法四</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 500px;
            background-color: pink;
            overflow: hidden;   /* 给父元素添加    overflow:hidden/auto/scroll */
        }
        .son1,
        .son2{
            height: 200px;
            width: 200px;
            float: left;
        }
        .son1{
            background-color: blue;
        }
        .son2{
            background-color: skyblue;
        }
        .box{
            width: 600px;
            height: 200px;
            background-color: #000;
        }
        /*给父元素添加类clearfix*/
        .clearfix:before,
        .clearfix:after{
              content:"";
              display:table;   /*这句话可以触发BFC，BFC可以清除浮动*/
        }
        .clearfix:after{
             clear:both;
        }
        .clearfix{
              *zoom:1;
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <div class="box"></div>
</body>
</html>

查看全文

相关阅读:
Linux-通过破解Root密码来更改用户密码
 测验1：Python基本语法元素(第一周)
Visual Studio 2019的安装&编写第一个C程序
 STL-vector之邻接表的建立
 分块-区间求和
 代码阅读方法与实践阅读笔记04
代码阅读方法与实践阅读笔记03
代码阅读方法与实践阅读笔记02
代码阅读方法与实践阅读笔记01
我们应当怎样做需求分析--阅读笔记

原文地址：https://www.cnblogs.com/Mykebai/p/9683994.html