今天看了一下css里面的clear:both,很长时间没有用这个了,今天忽然间看到以前记得笔记,还有点不太明白,呵呵,所以又复习了一下,其实也没有什么就是假如一个元素加载在float当中的话,那么其中有一个元素就不会跟着排列,如果都用float:left的话,那么可以依次排列下去,如果其中有一个元素没有添加float:left,那么位置将会发生意外的改变,如下:
<!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>
<title></title>
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<p style="float:left;">1</p>
<p>2</p>
<p style="float: right;">3</p>
</body>
</html>
上面的运行结果是2在最上面,然后是1在左面,3在右面。
但是当把代码变成下面这样的时候:
<!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>
<title></title>
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<p style="float:left;">1</p>
<p style="clear:both;">2</p>
<p style="float: right;">3</p>
</body>
</html>
就会看到1在左面,2在左面,3在右面,而且123 从页面上来看是依次往下排的。
总结:其实clear:both 主要就是来对float:left或者float:right来使用的,使添加了clear:both的元素,不受float的影响。按正常的流输出。