html+css基础教程入门篇之CSS 浮动行框和清理

本文介绍了CSS中的浮动和清理概念,包括如何使用float属性让元素浮动,以及如何通过clear属性防止元素围绕浮动元素。讨论了在实践中遇到的问题,如包围元素不占据空间,以及解决这些问题的方法,如使用.clearfix伪元素进行清理。同时,提到了过度使用浮动可能导致的布局问题及其解决方案。
摘要由CSDN通过智能技术生成

inherit:规定应该从父元素继承 float 属性的值

行框和清理

浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。

因此,创建浮动框可以使文本围绕图像:

行框围绕浮动框

要想阻止行框围绕浮动框,需要对该框应用 [clear 属性](()。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。

为了实现这种效果,在被清理的元素的_上外边距_上添加足够的空间,使元素的顶边缘垂直下降到浮动框下面:

clear 属性实例 - 对行框应用 clear

这是一个有用的工具,它让周围的元素为浮动元素留出空间。

让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:

.news {

background-color: gray;

border: solid 1px black;

}

.news img {

float: left;

}

.news p {

float: right;

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值