CSS 浮动（float）带来的影响及解决方法

最新推荐文章于 2023-01-18 11:07:49 发布

La_Paranoia

最新推荐文章于 2023-01-18 11:07:49 发布

阅读量1.7k

点赞数 1

分类专栏： CSS1 文章标签： clear: both 浮动清除

本文链接：https://blog.csdn.net/La_Paranoia/article/details/85329727

版权

CSS1 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本人入行前端已经三年，但由于种种原因只有一年的工作经验，而且没有进行总结，实在惭愧！！！就以这篇博客为新的起点吧！
作为前端程序员，会发现很多浏览器兼容性方面的问题，以及页面编写过程中某些问题的固定处理办法，所以就需要一一记录下来方便日后遗忘的时候能够很快应用到实际项目中。当然在学习新知识时也可以作为某些疑难知识点的记录，方便日后查阅。数年后在回顾历程相信会有不少感慨！
元素设置 float: left; 属性后会变为块级元素，但它又和普通的块级元素有区别，普通的块级元素会独占一行，浮动后的块级元素会一个接一个的排列。因此它会影响后续的元素排版。下面的代码列举了两种清除浮动的办法（都用到了 clear: both; 属性，但写法上不同，适用场景也就不同了）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动（float）带来的问题</title>
    <style>
        /* 清除所有元素默认的边距，进行“强定义” */
        * {
            padding: 0;
            margin: 0;
        }

        /* 包裹住浮动元素 */
        .parent {
            overflow: hidden;
        }

        /* 浮动元素的样式 */
        .box {
            float: left;    /* 一浮动变 块级元素！！！ */
            width: 100px;
            height: 30px;
            background-color: #66DAFA;
            text-align: center;
            line-height: 30px;
        }

        /* 高度为 0，对页面结构无影响，专用于清除浮动，可算作清除浮动的第二种方法 */
        .clear {
            clear: both;    /* CSS1 就已定义 */
        }

        /* 用 clear 清除浮动，否则 p 元素会和 .box 排版到一行 */
        .p {
            clear: both;
            margin-top: 16px;    /* 调大 margin-top 的值会发现相对于 p 元素“定位” */
        }
    </style>
</head>
<body>
    <p>下面的 p 元素相对于本元素p margin-top 定位，但是也会受 .box 盒子的影响。</p>

    <!-- 清除浮动的两种方法：一、父元素.parent hold住 二、单独盒子清除浮动的影响 -->
    <div class="parent">
        <div class="box">.box</div>
        <div class="box">.box</div>
        <div class="box">.box</div>
        <!--<div class="clear"></div>-->    <!-- 注释.parent 后解注本行 div -->
    </div>

    <!-- 受浮动（float）影响的元素 -->
    <p class="p">受浮动（float）影响的元素</p>

</body>
</html>

浮动（float）的问题当然不只这些！以上只是个人工作学习中的记录，以后会进一步的添加。

由于个人能力有限难免不会出现错误，如有发现欢迎大家留言指证！

La_Paranoia

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 浮动（float）带来的影响及解决方法

本人入行前端已经三年，但由于种种原因只有一年的工作经验，而且没有进行总结，实在惭愧！！！就以这篇博客为新的起点吧！作为前端程序员，会发现很多浏览器兼容性方面的问题，以及页面编写过程中某些问题的固定处理办法，所以就需要一一记录下来方便日后遗忘的时候能够很快应用到实际项目中。当然在学习新知识时也可以作为某些疑难知识点的记录，方便日后查阅。数年后在回顾历程相信会有不少感慨！元...
复制链接

扫一扫

专栏目录