clear在css中怎么用

魁首哥

作者

clear在css中怎么用

这篇文章主要介绍“clear在css中怎么用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“clear在css中怎么用”文章能帮助大家解决问题。

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

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

clear在css中的用法是什么

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

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

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

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

clear属性值：

eft 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

示例如下：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>123</title><style>img{float:left;}p.clear{clear:both;}</style></head><body><imgsrc="logocss.gif"width="95"height="84"/><p>Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.Thisissometext.</p><pclass="clear">Thisisalsosometext.Thisisalsosometext.Thisisalsosometext.Thisisalsosometext.Thisisalsosometext.Thisisalsosometext.</p></body></html>

输出结果：