对布局没影响的浮动，不清除，有关系吗？

发布于
2017-08-03

更新于
2017-08-03

如下代码和效果，没有清除浮动。

我知道浮动没有影响后面的元素，是因为我设定了高度。我想知道的是页面有浮动元素，我没有清除浮动，会不会有什么影响。

<!DOCTYPE html>
<html>

<head>
    <meta charset="urf-8">
    <title>浮动</title>
    <style>
        body {
            margin: 0;
        }

        #topNav {
            background: #f2f2f2;
        }

        #topNavWrap {
            width: 1190px;
            height: 30px;
            margin: 0 auto;
        }

        #topNavLeft {
            float: left;
            width: 200px;
            height: 100%;
            background: red;
        }

        #topNavRight {
            float: right;
            width: 200px;
            height: 100%;
            background: red;
        }

        p {
            width: 1190px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <nav id="topNav">
        <div id="topNavWrap">
            <div id="topNavLeft"></div>
            <div id="topNavRight"></div>
        </div>
    </nav>
    <p>浮动没有影响下面的布局</p>
</body>

</html>

图片描述

html5 html 前端

阅读 5k

9 个回答

发布于
2017-08-03

✓ 已被采纳

用了浮动，之后最好还是清一下浮动，不然代码写多，还有就是低版本的浏览器有意想不到的问题。推荐一个关于float的文章：https://segmentfault.com/a/11...

发布于
2017-08-03

清不清楚浮动是因为你需要父节点占用子类的高度，但是你这里的topNavWrap已经给了高度也就无所谓清不清除浮动了

狼人老沙

发布于
2017-08-03

消除浮动的方法，其中一个就是设置高度，你已经设置了就不会影响的，如果去除高度可以再设置overflow:hidden;或者其他去除浮动的方法就行。

John

发布于
2017-08-03

写一个公共的清楚浮动类一个好习惯

mike_580d671349874

发布于
2017-08-03

养成随时清除浮动的习惯，因为项目大了之后一旦由于浮动导致的问题就非常难排查。

发布于
2017-08-04

设置了浮动的元素和正常布局的元素处在不同的流导致页面布局混乱，明白这个原因你可以看情况要不要清除浮动。个人建议清除浮动，说不定项目大了实现模块化开发有可能导致页面混乱。

善良的乌贼

发布于
2017-08-04

设了高度，清不清都没事，不过从代码规范和长远考虑，最好还是都清了，反正写个公共类，加个类名也很方便

发布于
2017-08-04

当然没关系。
页面正常是原则，用户又看不到你的代码。而且一个页面又能活多久呢。

发布于
2017-08-04

虽然没啥影响，但是还是要养成一个习惯，最好清除把，如果你要兼容ie低版本的话，建议还是最好写下，ie对代码要求比较严格

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题