做网站投广告赚钱么网址收录查询
1. 什么是浮动（Float）？
浮动元素会脱离正常的文档流（Document Flow），并向左或向右移动，直到碰到父元素的边缘或另一个浮动元素。
基本语法
.float-left {float: left;
}.float-right {float: right;
}.no-float {float: none; /* 默认值 */
}
2. 浮动的常见应用场景
(1) 文字环绕图片
<div class="container"><img src="example.jpg" class="float-left" alt="示例图片"><p>这里是环绕的文字内容……</p>
</div>
效果：图片浮动在左侧，文字自动环绕在其右侧。 
(2) 多列布局（传统方式）
在 Flexbox 和 Grid 流行之前，浮动是创建多列布局的主要方式。
.father {border: black solid;width: 1250px;margin: 20px;background-color: #f5f5f5;}.left,.right {float: left;margin-left: 10px;}.left {height: 410px;width: 200px;background-color: black;}.right {height: 410px;width: 950px;background-color: blue;}.grandson {height: 188px;width: 200px;background-color: yellow;float: left;margin-left: 30px;margin-top: 10px;}
最外黑框线父元素father为文档流，其所有孩子都为浮动流，黑色区块left为一列，蓝色区块right为一列。蓝色区块内又有黄色浮动流grandson。
3. 浮动带来的问题及解决方案
(1) 父元素高度塌陷（Collapsing Parent）
问题：当子元素浮动后，父元素无法自动计算高度，导致布局错乱。
<body><div class="father"><div class="left"></div><div class="right"><div class="grandson"></div><div class="grandson"></div><div class="grandson"></div><div class="grandson"></div><div class="grandson"></div><div class="grandson"></div><div class="grandson"></div><div class="grandson"></div></div><div class="clear"></div></div><div class="no">this is not a content</div>
</body>
显示为：
发现父元素高度发生塌陷，后一位文档流顶了上来。
解决方案：
- 方法1：使用
clearfix技巧（推荐）.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {/* IE6、7 专有 */*zoom: 1;}
成功解决：<div class="father clearfix">
- 方法2：使用额外标签
============style============
.clear{
clear:both;
}
=============body============
<div class="clear"></div>>
(2) 浮动元素之间的间隙问题
问题：多个浮动元素之间可能出现意外的空白间隙。
原因：HTML 换行符被解析为空格，或 margin 未正确设置。
解决方案：
- 移除 HTML 换行（不推荐）
<div class="float-left"></div><div class="float-left"></div> - 使用
margin调整间距.float-item {float: left;margin-right: 10px; } - 改用 Flexbox 或 Grid（现代布局方案）