元素设置 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）的问题当然不只这些！以上只是个人工作学习中的记录，以后会进一步的添加。