clear属性怎么用

clear属性设置元素左侧或右侧的元素不浮动,可用于实现浮动的清除,解决浮动布局带来的一些问题。

clear属性怎么用

CSS clear属性

作用:clear属性可以设置浮动元素左右两侧的元素不浮动。

语法:

clear:none | left | right | both;

登录后复制

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

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

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

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

CSS clear属性的使用示例

nbsp;html>.div1 {  float: left;  width: 100px;  height: 50px;  margin: 10px;  border: 3px solid #73AD21;}.div2 {  border: 1px solid red;}.div3 {  float: left;  width: 100px;  height: 50px;  margin: 10px;  border: 3px solid #73AD21;}.div4 {  border: 1px solid red;  clear: left;}

不使用clear清除浮动

div1
div2 - 测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!

注意,在HTML代码中,div2在div1之后。但是,由于div1向左浮动,所以div2中的文本围绕div1流动。



使用clear清除浮动

div3
div4 - 测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本! 

说明:使用clear: left;将div4向下移动到浮动div3下面;值“Left”清除浮动到左侧的元素。我们还可以使用clear属性的“right”和“both”值。

登录后复制

效果图:

2.jpg

以上就是clear属性怎么用的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2888607.html

(0)
上一篇 2025年3月10日 21:13:29
下一篇 2025年3月10日 21:13:39

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • css all属性怎么用?

    all属性是用来将除了 unicode-bidi 和 direction外的所有属性重置为其初始值或从父元素那继承的值。 CSS all属性 all属性实际上是所有CSS属性的缩写,表示,所有的CSS属性都怎样怎样;但是,不包括unicod…

    2025年3月10日
    200
  • css align-content属性怎么用

    align-content属性是用来设置自由盒内部各个项目在垂直方向排列方式。 CSS align-content属性 作用:align-content属性是用来设置自由盒内部各个项目在垂直方向排列方式;它修改了flex-wrap属性的行为…

    2025年3月10日
    200
  • border-collapse属性怎么用

    border-collapse属性是用于表格元素的, 可以设置表格的两边框合并为一个单一的边框。 CSS border-collapse属性 border-collapse属性设置表格的边框是否被合并为一个单一的边框,还是像在标准的 HTM…

    2025年3月10日
    200
  • css align-items属性怎么用?

    css align-items属性是用于指定float容器内项目在横轴方向的对齐方式,其语法是“align-items: stretch|center|flex-start|flex-end|baseline;”。 css align-it…

    2025年3月10日 编程技术
    200
  • caption-side属性怎么用

    caption-side属性用来设置表格标题的位置,可以设置表格标题是位于表格的上面,还是下面。 CSS caption-side属性 作用:caption-side属性设置表格标题的位置。 语法: caption-side: top|bo…

    2025年3月10日
    200
  • CSS如何设置表格边框间的距离?border-spacing属性的使用

    在css中,border-spacing属性用于表格的边框在“分离”的状态下,设置相邻单元格的边框间的距离。下面本篇文章就来带大家了解一下border-spacing属性的使用方法,希望对大家有所帮助。 CSS border-spacing…

    2025年3月10日
    200
  • background属性怎么用

    background属性是css的一个简写属性,可以在一个声明中设置所有的背景属性:背景颜色,背景图像、图像的位置、大小、定位区域、绘画区域,如何重复背景图像、背景图像是否固定或者随着页面的其余部分滚动。 CSS  background属性…

    2025年3月10日
    200
  • background-image属性怎么用

    background-image属性是用来设置元素的一个或多个背景图像,用逗号(,)分隔。 CSS  background-image属性 作用:background-image属性为元素设置背景图像。 语法: background-ima…

    2025年3月10日
    200
  • background-attachment属性怎么用

    background-attachment属性需要和background-image属性一起使用,用来设置背景图像是否固定或者随着页面的其余部分滚动。 CSS  background-attachment属性 作用:background-a…

    2025年3月10日
    200
  • css background-color属性怎么用?

    css  background-color属性 作用:设置元素的背景颜色。 background-color:颜色值; 登录后复制 说明:background-color 属性为元素设置一种纯色背景。这种颜色会填充元素的内容、内边距和边框区…

    2025年3月10日
    200

发表回复

登录后才能评论