不久前我们写了关于浮动属性的文章。所以,现在是一个很好的时间来解释clear的属性。
clear的属性与浮点属性直接相关。它指定元素是否应该在浮动元素的旁边,或者它是否应该移动到它们的下方。此属性既适用于浮动元素,也适用于非浮动元素。
如果一个元素能够适应浮动元素旁边的水平空间,它将会适合;除非您将clear属性应用于与浮体相同的方向。然后元素会移动到浮动元素的下方。
在CSS中创建的每个元素都需要添加优质设计。
clear的属性可以有以下值:
none——元素没有被移动到清除过去的浮动left-元素被移动到清除过去的左侧浮动right-元素被移动到清除过去的右浮标Both-这个元素都向下移动以清除左右浮动
支持
在咨询了CaniUse服务后,我们发现支持率超过了87%。
例子
HTML:
CSS:
在这里我们可以看到已经浮动的div:left应用到他们。在我们清楚地表明:在文本段落左边,它移动到浮动元素之下。
HTML:
CSS:
接下来,我们会看到两个具有float的div:右属性和带有clear:right属性的段落。通过设置这个,段落会移动到浮动元素的下方。
现在是为文本添加一些格式的好时机。
HTML:
CSS:
最后,最后一个示例显示clear的使用:两个属性。这两个占卜者分别左右浮动,而该段具有添加到其中的clear属性。通过这个,它会移动到浮动元素的下面。值得一提的是,这是最常用的清除属性。
结尾
希望这篇文章能对你的项目有所帮助。当使用这个属性时要小心,过去已经引起了许多混乱。但是,我们确信读完这篇文章之后,你可以愉快地编码!