容易忘记的css

最新推荐文章于 2025-01-19 02:41:45 发布

原创最新推荐文章于 2025-01-19 02:41:45 发布 · 575 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS

自己的专栏收录该内容

12 篇文章

订阅专栏

今天看了一下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的影响。按正常的流输出。