清楚浮动是不是在 li浮动元素任何一个父元素加上clearfix即可？

来源：3-1 新鲜甩尾部分开发

weixin_慕尼黑0465866

2023-04-25 21:56:55

    <section class="hot-ads clearfix">
        <div class="center-wrap">
            <ul>
                <li>
                    <a href=""><img src="images/small01.png" alt=""></a>
                </li>
                <li>
                    <a href=""><img src="images/small02.png" alt=""></a>
                </li>
                <li>
                    <a href=""><img src="images/small03.png" alt=""></a>
                </li>
                <li>
                    <a href=""><img src="images/small04.png" alt=""></a>
                </li>
            </ul>
        </div>
    </section>

写回答

1回答

好帮手慕久久

2023-04-26

同学你好，理论上是的，但是实际细节会有区别。比如：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        section {
            background-color: red;
        }

        div {
            background-color: blue;
        }

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        p {
            float: left;
        }
    </style>
</head>

<body>
    <section class="clearfix">
        <div>
            <p>123</p>
            <p>456</p>
        </div>
    </section>

</body>

</html>

将clearfix设置在div上，那么div会有高度，此时整体背景色是蓝色。但是将clearfix设置在section上，div没有高度，但是setction有高度，整体显示红色背景色。

对于页面来说，两种写法，都会让section区域有高度（清除了浮动），但是仔细分析细节，是不同的。

祝学习愉快！

0 学习 · 17877 问题

查看课程

相似问题

导航栏受到浮动的影响

回答 1

右上角的图标不能居中，图标和竖线不能同时搞到居中；

回答 1

我只是想给我觉得需要清除浮动的子元素的父元素添加了clearfix 为什么页面就会变成这样。

回答 1

父元素自适应宽度，子元素同行及自动换行的问题

回答 1

打开慕课网App查看更多内容