*{
margin: 0;
padding: 0;
}
.row {
display:block;
box-sizing:border-box;
}
.row:before {
content: ‘’;
display: block;
clear: both;
}
.row:after {
content: ‘’;
display: block;
clear: both;
}
以行为单位,div附加该样式,能够根据内容计算高度,在伪类中清除了行之间的浮动关联,不会出现塌陷问题
注:BFC问题
垂直或者水平方向控制间距时,请尽量使用统一的间距设置
例如 希望两个方块间距为30px 假设你给第一个设置10px的下边距,第二个设置20px的上边距,结果得到的会是20px的边距,原因在于BFC(块级元素格式化上下文)原理,相邻的元素垂直或者水平方向的边距会被计算为重合,取最高值。
解决的方法 1.只设置第一个方块的下边距或者只设置第二个方块的上边距
2.使用定位解决