CSS清除浮动_清除float浮动

<!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 {
            content: ".";
            overflow: hidden;
            background-color: green;
            border: 3px solid rebeccapurple;
        }

        .clearfix2 {
            background-color: green;
            border: 3px solid rebeccapurple;
        }

        .clearfix3 {
            background-color: green;
            border: 3px solid rebeccapurple;
            width: auto;
            height: 200px;
        }

        .clearfix4:after {
            content: ".";
            /* Older browser do not support empty content */
            visibility: hidden;
            display: block;
            height: 0;
            clear: both;
        }

        .clearfix4 {
            background-color: green;
            border: 3px solid rebeccapurple;
        }

        .clearfix5 {
            background-color: green;
            border: 3px solid rebeccapurple;
        }

        .clearfix5 {
            overflow: auto;
            height: 1%
        }

        .clearfix6 {
            background-color: green;
            border: 3px solid rebeccapurple;
        }

        .clearfix6 {
            zoom: 1;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <!--对父级CSS选择器加overflow:hidden样式，
    可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。-->
    <div class="clearfix">
        <div>
            <div style="float:left; width:100px; height:100px; background-color:#f00"></div>

        </div>
        <div style="width:200px; height:200px; background-color:#00f; float:right"></div>
    </div>
    <br/>
    <!--clear:both清除浮动-->
    <div class="clearfix2">
        <div>
            <div style="float:left; width:100px; height:100px; background-color:#f00"></div>
        </div>
        <div style="width:200px; height:200px; background-color:#00f; float:right"></div>
        <div class="clear"></div>
    </div>
    <br/>
    <!--对父级设置适合CSS高度-->
    <div class="clearfix3">
        <div>
            <div style="float:left; width:100px; height:100px; background-color:#f00"></div>
        </div>
        <div style="width:200px; height:200px; background-color:#00f; float:right"></div>
        <div class="clear"></div>
    </div>
    <br/>
    <!--这个clearfix的CSS使用了after这个伪对象，它将在应用clearfix的元素的结尾添加content中的内容。
    在这里添加了一个句号"."，并且把它的display设置成block；高度设为0；clear设为both；visibility
    设为隐藏。这样就达到了撑开容器的目的啦。-->
    <div class="clearfix4">
        <div>
            <div style="float:left; width:100px; height:100px; background-color:#f00"></div>
        </div>
        <div style="width:200px; height:200px; background-color:#00f; float:right"></div>
        <div class="clear"></div>
    </div>

    <div class="clearfix5">
        <div>
            <div style="float:left; width:100px; height:100px; background-color:#f00"></div>
        </div>
        <div style="width:200px; height:200px; background-color:#00f; float:right"></div>
        <div class="clear"></div>
    </div>

    <div class="clearfix6">
        <div>
            <div style="float:left; width:100px; height:100px; background-color:#f00"></div>
        </div>
        <div style="width:200px; height:200px; background-color:#00f; float:right"></div>
        <div class="clear"></div>
    </div>
</body>

</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容