clear属性怎么用


本文摘自PHP中文网,作者青灯夜游,侵删。

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

CSS clear属性

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

语法:

1

clear:none | left | right | both;

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

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

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

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

CSS clear属性的使用示例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<!DOCTYPE html>

<html>

<head>

<style>

.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;

}

</style>

</head>

<body>

<h2>不使用clear清除浮动</h2>

<div class="div1">div1</div>

<div class="div2">div2 - 测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!</div>

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

<br><br>

<h2>使用clear清除浮动</h2>

<div class="div3">div3</div>

<div class="div4">div4 - 测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本! </div>

<p>

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

</body>

</html>

效果图:

2.jpg

以上就是clear属性怎么用的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css怎样让两个div重叠

css width属性怎么用

浅析html table表格的使用方法

css如何去除inline-block元素间的间距?(多种方法)

css中&表示什么意思

css怎么设置div随着窗口大小变换

16 个css开发中需要了解的devtools技巧

什么是css预编译

css如何让背景图片不重复

css怎么设置最大高度

更多相关阅读请进入《clear属性》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    正在狠努力加载,请稍候...