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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

宽度计算

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

背景高度一致

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值