CSS清除浮动的几种有效方法

父级div定义overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
结尾处加空div标签clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单，代码少，浏览器支持好，不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，影响性能

父级div定义伪类:after和zoom（最靠谱的方案）
原理：IE8以上和非IE浏览器才支持:after，原理和方法2类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好，不容易出问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多，要两句代码结合使用，才能让主流浏览器都支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        /* 方式1 */
        /* .parent{
            border:2px solid green;
            overflow:hidden;
        } */
        /* 方式3(推荐) */
        .parent{
            border:2px solid green;
            zoom:1;
        }
        .parent:after{
            content:"";
            clear:both;
            display: block;
            visibility: hidden;
        }

        .A{
            width:100px;
            height:100px;
            background-color: aqua;
            float:left;
        }
        .B{
            width:100px;
            height:100px; 
            background-color: burlywood;
            float:left;
        }
        /* 方式2 */
        /* .C{
            clear:both;
        } */

    </style>
</head>
<body>
    <div class="parent">
        <div class="A"></div>
        <div class="B"></div>
        <div class="C"></div>
    </div>
    <div></div>
</body>
</html>

posted @ 2020-03-22 09:35 aeipyuan 阅读(152) 评论(0) 编辑收藏举报

刷新页面返回顶部

aeipyuan

CSS清除浮动的几种有效方法

CSS清除浮动的几种有效方法

公告