<!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类型
代码问题