[RCA][2017-11-22] 漂浮引起布局混乱

最新推荐文章于 2022-05-28 22:42:32 发布

Nick_Na

最新推荐文章于 2022-05-28 22:42:32 发布

阅读量218

点赞数

分类专栏：工作经验文章标签： RCA

本文链接：https://blog.csdn.net/u010098544/article/details/78606084

版权

工作经验专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!-- DEMO -->
<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style type="text/css">
        * {
            color: #fff;
        }

        .line1 {
            height: 50px;
            background-color: red;
        }

        .line1 .lc1 {
            height: 80px;
            width: 80px;
            float: left;
            background-color: #666;
        }

        .line2 {
            height: 50px;
            background-color: green;
        }

        .line2 .lc2 {
            height: 40px;
            width: 40px;
            background-color: #333;
            float: left;
        }
    </style>
</head>
<body>
    <div class="line1">line1
        <div class="lc1">lc1</div>
    </div>
    <div class="line2">line2
        <div class="lc2">lc2</div>
    </div>
</body>
</html>

背景知识

HTML中元素漂浮, 父容器未被撑开, 导致漂浮后面的元素位置偏移，如demo中的代码所示。

问题现象

漂浮元素位置发生偏移。

影响范围

页面UI效果

问题原因

前一个Div中子元素漂浮，并且尺寸大于父容器。

问题分析过程

1. 查看设置和取消浮动后的效果，确定是float
2. 查看其它float元素

解决办法

1. 修改父元素的高度，是浮动元素可以不超出容器

后续处理措施

经验教训

float 要记得清除浮动或者设置父容器的高度

RCA类型

代码问题

Nick_Na

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[RCA][2017-11-22] 漂浮引起布局混乱

<!DOCTYPE html><html><head> <title>Test</title> <style type="text/css"> * { color: #fff; } .line1 { height: 50px; back
复制链接

扫一扫

专栏目录