html clear属性值,css clear属性怎么用

本文详细介绍CSS clear属性的使用方法,包括其不同值left、right、both和none的作用,以及如何通过clear:both解决浮动元素带来的布局问题。通过实例演示,展示如何在实际项目中应用此属性。
摘要由CSDN通过智能技术生成

5268f80b9b1e01f982625ef6fac83ca1.png

css clear属性指定元素的左侧或右侧上不允许出现浮动元素。可用于实现浮动的清除,解决浮动布局带来的一些问题。

171da4e34306e96cde95127dd721ace4.png

css clear属性怎么用?

clear 属性规定元素的哪一侧不允许其他浮动元素。

语法:clear:left|right|both|none|inherit;

属性值:

● left:在左侧不允许浮动元素。

● right:在右侧不允许浮动元素。

● both:在左右两侧均不允许浮动元素。

● none:默认值。允许浮动元素出现在两侧。

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

说明:

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。

不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

注释:所有主流浏览器都支持 clear 属性。任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

css clear属性 示例

img

{

float:left;

}

p.clear

{

clear:both;

}

logocss.gif

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.

使用clear:both清除浮动:

logocss.gif

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.

效果图:

a6b2e336bc6a8d64620f98c5a019e44f.png

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值