清除浮动最常用

Posted langz-

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了清除浮动最常用相关的知识，希望对你有一定的参考价值。

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #parent {
                border: 1px solid blueviolet;
            }
            #childone {
                float: left;
                width: 200px;
                height: 400px;
                background-color: #AFEEEE;
            }
            #childtwo {
                float: left;
                width: 200px;
                height: 200px;
                background-color: #FFB6C1;
            }
            #parent::after {
                content: "";
                display: block;
                /*height: 0;*/
                clear: both;
                /*visibility: hidden;*/
                
            }
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="childone"></div>
            <div id="childtwo"></div>
        </div>
    </body>

after伪元素必须配合content使用

clear：both只在块级元素上生效

以上是关于清除浮动最常用的主要内容，如果未能解决你的问题，请参考以下文章

如何从片段外部清除/重置地图？

转载-常用的清除浮动的方法有以下三种:

8种清除浮动的方法

CSS清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )

overflow:hidden清除浮动原理解析及清除浮动常用方法总结

clearfix清除浮动