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

2024-04-13 09:25:06

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

CSS clear属性

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

语法：clear：none | left | right | both;

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

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

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

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

CSS clear属性的使用示例

.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”值。

效果图：

html clear属性值,clear属性怎么用相关推荐

html clear属性值,clear属性有哪些属性值 CSS clear属性的理解.
CSS clear是什么属性... 语法: clear : none | left |right | both 参数: none : 允许两边都可以有浮动对象 both : 不允许有浮动对象 left ...
WF:要想绑到两个活动的属性值---依赖属性的定义方法
WF中依赖属性特点: 依赖属性是属性值存储在一个中央存储库中.而不是实现为类中的普通实例变量. 依赖属性的主要优势在于允许在运行时绑定属性值到实例数据.绑定所产生的属性实际值则是在运行时确定的. 要想 ...
background 属性值及属性值的顺序
background: [background-color] | [background-image] | [background-position]/[background-size] | [bac ...
[CSS] 浮动 float属性、clear属性详解
一.浮动 1.简单描述设置了float属性的元素会根据设置的属性值左右浮动,该元素被称为浮动元素. 浮动元素会从普通的文档流中脱离出来,但是浮动元素影响的不仅是自己,还会影响周围的元素对其进行环绕. ...
【java】java获取对象属性类型、属性名称、属性值
java获取对象属性类型.属性名称.属性值获取属性修饰符:[在Field[]循环中使用] String modifier = Modifier.toString(fields[i].getModi ...
Thymeleaaf中设置属性值实现动态控制select是否可选
场景在新增时select可以下拉选择, 在编辑时select不可以下拉选择. 所以需要动态控制其disabled属性. 注意使其禁用时:disabled="disabled" ...
C#类的属性遍历及属性值获取
1.定义一个类 public class Person {public string Name { get; set; }public int ID { get; set; } } 2.获取属性方法 ...
css_属性选择器（根据属性名或属性值设定指定样式）
1.[属性名] 选择含有指定属性的元素 <!DOCTYPE html> <html lang="en"> <head><meta char ...
jQuery获取或设置元素的属性值
jQuery获取或设置元素的属性值获取元素属性值固有属性($('div).prop('color')) 自定义属性($('div).attr('index')) //html代码<a hre ...

最新文章

热门文章