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

最新推荐文章于 2025-05-26 20:21:04 发布

原创最新推荐文章于 2025-05-26 20:21:04 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#CSS浮动 #CSS清除浮动 #CSS #CSS布局 #CSS入门

CSS 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了CSS中的一些实用布局技巧，如使用border-box模型控制元素宽度，避免因边框导致的宽度溢出；通过clearfix方法解决浮动元素对页脚的影响；以及通过背景颜色的统一设置保持列背景的一致性。

宽度计算

当给元素赋予样式时，可能涉及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;
}

背景高度一致

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