iOS开发html+css学习之完善clearfix

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1 {
width: 300px;
height: 300px;
background-color: #bfa;
}

        .box2 {
            width: 200px;
            height: 200px;
            background-color: yellow;

            /* 
                子元素和父元素相邻的垂直外边距会发生重叠，子元素外边距会传递给父元素
                使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠
             */
            margin-top: 100px;
        }

        .box3 {
            border: 1px solid black;
        }

        .box4 {
            width: 100px;
            height: 100px;
            background-color: blue;

            float: left;
        }



        /* 解决父子元素的外边距重叠 */
        /* .box1::before {
            content: ""; */
            /* 可以将一个元素设置为表格显示 */
            /* display: table;
        } */
        /* 解决父元素的高度塌陷 */
        /* .clearfix::after {
            content: "";
            display: block;
            clear: both;
        } */

        /* 
            经过修改后的clearfix是一个多功能的
            既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
         */
         .clearfix::before,
         .clearfix::after {
             content: "";
             display: table;
             clear: both;
         }
         .clearfix {
             zoom: 1;
         }
    </style>
</head>

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

</div>

</body>
</html>

iOS开发html+css学习之完善clearfix

推荐阅读更多精彩内容