css float 和 clear:both

最新推荐文章于 2024-01-25 14:38:12 发布

^果然好^

最新推荐文章于 2024-01-25 14:38:12 发布

阅读量712

点赞数 2

分类专栏： # div+css+js

本文链接：https://blog.csdn.net/allensandy/article/details/90380660

版权

div+css+js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

clear:right/left 表示该元素的左边或者右边不允许出现浮动元素。

阅前必看---CSS浮动(float,clear)通俗讲解-参考：https://www.cnblogs.com/zfquan/p/7793945.html

案例1

不clear

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .top{
        float:right;
        height:200px;
        background-color:brown;
    }
    .center
    {
        height: 200px;
        background-color: bisque;
    }
    </style>
</head>
<body>
    <div class="top">上面</div>
    <div class="center">下面</div>
</body>
</html>

clear

效果：

案例2

定义非常容易理解，但是读者实际使用时可能会发现不是这么回事。

定义没有错，只不过它描述的太模糊，让我们不知所措。

根据上边的基础，假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下：

此时div1、div2都浮动，根据规则，div2会跟随在div1后边，但我们仍然希望div2能排列在div1下边，就像div1没有浮动，div2左浮动那样。
这时候就要用到清除浮动（clear），如果单纯根据官方定义，读者可能会尝试这样写：在div1的CSS样式中添加clear:right;，理解为不允许div1的右边有浮动元素，由于div2是浮动元素，因此会自下移一行来满足规则。
其实这种理解是不正确的，这样做没有任何效果。看小菜定论：

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

怎么理解呢？就拿上边的例子来说，我们是想让div2移动，但我们却是在div1元素的CSS样式中使用了清除浮动，试图通过清除div1右边的浮动元素 (clear:right;)来强迫div2下移，这是不可行的，因为这个清除浮动是在div1中调用的，它只能影响div1，不能影响div2。
根据小菜定论，要想让div2下移，就必须在div2的CSS样式中使用浮动。本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。