CSS17.完善cleanfix(同时解决高度塌陷和父子共享外边距问题）

最新推荐文章于 2021-09-30 20:00:00 发布

时光无错孤独难谈

最新推荐文章于 2021-09-30 20:00:00 发布

阅读量284

点赞数

分类专栏： html5 && css

本文链接：https://blog.csdn.net/qq_43745403/article/details/104325940

版权

html5 && css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <style type="text/css">
            .box1{
                width: 400px;
                height: 400px;
                background-color: yellow;
                
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: rgb(112, 133, 228);
                /* 
                    子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素
                    使用空的table标签可以隔离父子元素外边距，阻止外边距重叠
                 */
                margin: 200px 0 0 0;
            }

            

            .box3{
                border: 1px red solid;
            }
            .box4{
                width: 100px;
                height: 100px;
                background-color:black;
                float: left;
            }


            /* 解决父子元素外边距重叠 */
            .box1:before{
                content: "";
                /* 可以将一个元素设置表格显示，一个空的div没用 */
                display: table;
            }
            /* 解决父元素高度塌陷 */
            .clearfix::after{
                content: "";
                /* display: block; */
                display: table;
                clear: both;
            }
            
            /* 
                经过修改后的clearfix既可以解决高度塌陷，又可以保证父元素子元素锤子外边距不会重叠
             */
            .clearfix::after , .clearfix::before{
                content: "";
                display: table;
                clear: both;
            }

            /* 兼容IE6 */
            .clearfix{
                zoom: 1;
            }

        
        </style>


    </head>
        <!-- clearfix  清除浮动 -->
    <body>
        <div class="box3 clearfix">
            <div class="box4"></div>
        </div>


        <div class="box1 clearfix">
            <div class="box2"></div>
        </div>
        


    </body>


</html>

时光无错孤独难谈

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS17.完善cleanfix(同时解决高度塌陷和父子共享外边距问题）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> <style type="text/css"> .box1{ width: 400px; height:...
复制链接

扫一扫