首页 技术文章 web前端 clear在css中的用法是什么
正文 评论

clear在css中的用法是什么

在css中,clear属性用于清除元素的浮动效果,该属性可指定段落的左侧或右侧浮动元素的效果;默认该属性的值为none,表示允许浮动元素出现在两侧,也可设置元素的左侧、右侧或左右两侧不能有浮动元素,语法为“元素{clear:属性值;}”。

clear在css中的用法是什么

本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。

clear在css中的用法是什么

css中clear的作用是清除元素的浮动效果。

clear属性指定段落的左侧或右侧不允许浮动的元素。

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

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

clear属性值:

  • eft 在左侧不允许浮动元素。

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

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

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

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

示例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
img
{
float:left;
}
p.clear
{
clear:both;
}
</style>
</head>
<body>
<img src="logocss.gif" width="95" height="84" />
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p class="clear">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. This is also some text.</p>
</body>
</html>

输出结果:

clear在css中的用法是什么

(学习视频分享:css视频教程)

以上就是clear在css中的用法是什么的详细内容,更多请关注主题君其它相关文章!

-=||=-收藏赞 (0)
更多主题
单栏极简文艺WordPress博客主题:Diaspora主题
¥ 0 关注:20,031
详情
简约黑白WordPress个人博客主题:Personal主题
¥ 0 关注:19,990
详情
v1.0.0
小程序收录免费WordPress主题:XCX主题
¥ 0 关注:19,608
详情
v1.0.0
一款简约单栏的免费WordPress博客主题:itheme主题
¥ 0 关注:18,113
详情
功能丰富切轻量的WordPress虚拟资源主题:Rizhuti主题
¥ 599 关注:18,000
详情
大气优雅免费WordPress博客主题:HONEY主题
¥ 0 关注:14,853
详情
回复
暂无评论

不要再留垃圾评论了,主题君整理资源不容易,留几句鼓励的话吧。