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

2017-01-13 19:22:21来源:CSDN作者:qq_24473113人点击

总所周知,初学者在学习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>

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台