float与clear

最新推荐文章于 2022-08-15 11:25:08 发布

richest_qi

最新推荐文章于 2022-08-15 11:25:08 发布

阅读量328

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qzw752890913/article/details/106786865

版权

css 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

float

float:left或float:right，让元素浮动。

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

        li{
            list-style:none;
            width:20px;line-height:20px;
            background-color:goldenrod;
            float:left;
            margin:5px;
            text-align:center;
            font-family:Arial, Helvetica, sans-serif;
            font-size:0.75em;
        }

在这里插入图片描述

clear

clear:left或clear:right或clear:both作用在非浮动元素上，以期望该元素与其前面的浮动元素不在一行显示。

clear:right时，所有li仍然一行显示
clear:right无效

        li:nth-of-type(3){
            clear:right; 
        }

在这里插入图片描述

clear:left时， li#3与其前面的li#2不在一行排列，换到了下一行
clear:left有效

        li:nth-of-type(3){
            clear:left;
        }

在这里插入图片描述

clear:both时，li#3与其前面的li#2不在一行排列，换到了下一行
效果与clear:left一样。

本例可以发现：clear:left有效，则clear:right必定无效。clear:left与clear:both效果相同。
试着让所有li都float:right，也会得到类似结论：clear:right有效，则clear:left必定无效。clear:right与clear:both效果相同。
可见，使用clear时，直接clear:both就好，不用纠结clear:left还是clear:right。
还有很重要的一点是，clear顾前不顾后，clear作用在某元素上，因此该元素将与其前面的浮动元素分行排列，但仍与其后面的浮动元素一行显示。

clear的限制

clear只对display为block|table|list-item等块级元素有效，clear对内联元素无效

比如，<img>

<body>
    <div id='doraemon'>哆啦A梦怕老鼠</div>
    <img src="./imgs/doraemon.gif">
</body>

    #doraemon{
        float:left;
    }
    img{
        clear:both;
    }

在这里插入图片描述
怎么办？

clear仅对块级元素有效，给<img>添加display:block

<body>
    <div id="doraemon">哆啦A梦怕老鼠</div>
    <img src="./imgs/doraemon.gif">
</body>

    div{
        float:left;
    }
    img{
        clear:both;
        display:block
    }

在这里插入图片描述
还有其他办法么？

clear仅对块级元素有效，在浮动元素div#doraemon后添加一个空的块级元素
如，<div style='clear:both;'></div>

<body>
    <div id="doraemon">哆啦A梦怕老鼠</div>
    <div style='clear:both;'></div>
    <img src="./imgs/doraemon.gif">
</body>

    #doraemon{
        float:left;
    }

clear仅对块级元素有效，使用块级伪元素:before
稍微改动下html结构，用span包裹img

<body>
    <div id="doraemon">哆啦A梦怕老鼠</div>
    <span>
        <img src="./imgs/doraemon.gif">
    </span> 
</body>

    #doraemon{
        float:left;
    }
    span:before{
        display:block;
        content:'';
        clear:both;
    }

span:before生成的块状伪元素成为span的第一个子节点。

clear仅对块级元素有效，使用块级伪元素:after
稍微改动下html结构，用div#container包裹div#doraemon

    <div id="container">
        <div id="doraemon">哆啦A梦怕老鼠</div>
    </div>
    <img src="./imgs/doraemon.gif">
</body>

    #doraemon{
        float:left;
    }
    #container:after{
        display:block;
        content:'';
        clear:both;
    }

#container:after生成的块级伪元素成为div#container的最后一个子节点。

clear只能清除前面的浮动元素的影响

之前我们介绍过浮动的两个特点：浮动元素使其父元素高度塌陷、浮动元素后面的元素受浮动影响会产生环绕效果。
clear作用在非浮动元素_{仅块级元素}上，该元素将独占一行，不会环绕浮动元素，进而父元素高度也不会塌陷，即消除了前面的浮动元素带来的影响。
注意哈，clear顾前不顾后，仅消除了 clear作用的元素的前面的浮动元素带来的影响。

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
float与clear

floatfloat:left或float:right，让元素浮动。 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> li{ list-style:non
复制链接

扫一扫