为何css特性值 clear:right不起功效详尽讨论

日期:2021-01-20 类型:科技新闻 

关键词:如何制作微信小游戏,微信游戏小程序,公众号游戏,h5小游戏模板,小程序游戏源码

应用clear特性消除波动是习以为常的事儿,针对clear特性的界定将会也烂熟于胸了。
比如,clear:left是消除左边的波动元素,案例编码以下:

拷贝编码
编码以下:

View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.first
{
width:100px;
height:100px;
border:1px solid red;
float:left;
}
.second
{
width:100px;
height:100px;
border:1px solid blue;
float:left;
}
.third
{
width:100px;
height:100px;
border:1px solid green;
float:left;
clear:left;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</body>
</html>

从以上编码能够看出,第3个div的clear:left特性的功效获得了反映,元素造成换行。可是应用clear:right特性的情况下不一定见效了。案例编码以下:

拷贝编码
编码以下:

View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.first
{
width:100px;
height:100px;
border:1px solid red;
float:left;
}
.second
{
width:100px;
height:100px;
border:1px solid blue;
float:left;
clear:right;
}
.third
{
width:100px;
height:100px;
border:1px solid green;
float:left;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</body>
</html>

以上编码虽然第2个div有clear:right编码,可是它的右边還是出現了波动元素。这关键编码是次序实行的,当实行到第2个div要消除右波动的情况下,第3个div并沒有被载入,因此它的消除实际效果也就失效了,因而第3个div仍然会紧跟随第2个div。
上一篇:谈谈对css特性margin的了解 返回下一篇:没有了