完美解决HTML中边框高度塌陷问题

最新推荐文章于 2024-09-01 21:56:01 发布

小菜鸟的进阶

最新推荐文章于 2024-09-01 21:56:01 发布

阅读量2.4k

点赞数 1

文章标签： html 浮动-高度塌陷

本文链接：https://blog.csdn.net/qq_24473113/article/details/54408809

版权

总所周知，初学者在学习HTML&CSS时使用浮动总会出现各种各样的边框塌陷问题，现在我就这个问题提供一个可以兼容各种浏览器的解决方案

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box1{
                border: solid red 1px ;
            }
            .box2{
                width: 100px;
                height: 100px;
                background-color: skyblue;
                float: left;
            }
            .clearfix:after{
                /*添加一个内容*/
                content: "";
                /*转换为一个块元素*/
                display:block;
                /*清除浮动*/
                clear: both;
            }
            /*
             * IE6中不支持after伪类
             * 所以用hasLayout来解决
             */
            .clearfix{
                zoom: 1;
            }
        </style>
    </head>
    <body>
        <div class="box1 clearfix">
            <div class="box2">
            </div>
        </div>
    </body>
</html>