CSS浮动布局——高度/宽度计算和清除浮动

宽度计算

    当给元素赋予样式时，可能涉及border，会导致整体宽度大于页面宽度。

    优先的办法是修改宽度计算方式，使盒子的宽度取值为 content + padding + border，而不仅是之前的content——所以当增加内边距或边界的宽度时，不会使盒子更宽——而是会使内容调整得更窄。 

* {
    box-sizing: border-box;
}

清除页脚浮动

     浮动的元素存在于正常的文档布局流之外，在某些方面的行为相当奇怪，比如不能通过margin-top调整页脚的顶距

footer {/*无效的方法*/
  clear: both;
  margin-top: 4%;
}

这里可以尝试引入新元素解决这个问题

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

footer{
    
}
.clearfix{
    clear: both;
}

 再通过，给内容添加新的约束（给列块新增column类），来去除新元素的样式

.column,footer {
    padding: 1%;
    border: 2px solid black;
    background-color: yellow;
}
footer{
    margin-top: 4%
}
.clearfix{
    clear: both;
}

背景高度一致

    明显可以看出，由于内容多少不一致，导致每一列背景高度不同。虽然可以通过设置固定值来处理，但是显然不是很合适。可以将这些列的背景颜色设置为父元素的背景颜色，这样就不会看到高度是不同的。这是目前最好的选择。