本文详情:

第一种 BFC中的盒子对齐

div {                height: 20px;        }                    .container {            position: absolute;  /* 创建一个BFC环境*/            height: auto;            background-color: #eee;        }                .box1 {            width: 400px;            background-color: red;        }                .box2 {            width: 300px;            background-color: green;        }                .box3 {            width: 100px;            background-color: yellow;            float: left;        }                .box4 {            width: 200px;            height: 30px;            background-color: purple;        }

第二种 外边距折叠 垂直方向上的距离由margin决定

.container {            overflow: hidden;            width: 100px;            height: 100px;            background-color: red;        }                .box1 {            height: 20px;            margin: 10px 0;            background-color: green;        }                .box2 {            height: 20px;            margin: 20px 0;            background-color: green;        }

上下DIV同时margin 造成重叠

第二种BFC,因为浮动造成盒子对齐 解决方法 相隔的DIV换成P标签

第三种DBC 左边浮动右边自适应

第四种DFC 文字环绕 解决方法verflow:hidden清除浮动