css样式-float浮动
html
<div style="border: 1px solid #ccc; width: 300px">
<div style="float: right; width: 100px; height: 50px; background: lightblue">浮动元素</div>
<p>这是一段非常非常非常常的长文本..............，它会围绕浮动元素流动。</p>
</div>
<div style="border: 1px solid #ccc; width: 300px">
<p>这是一段非常非常非常常的长文本..............，它会围绕浮动元素流动。</p>
<div style="float: right; width: 100px; height: 50px; background: lightblue">float: right</div>
</div>float 是 CSS 中的一种布局属性，主要用于实现元素的浮动。
布局规则
- 脱离标准文档流：浮动元素会脱离标准文档流，但仍会保持在父容器中。
- 影响后续元素：非浮动的块级元素（如
p）会围绕浮动元素重新排列，文本会在浮动元素的左右侧流动，直到浮动元素的底部。 - 浮动方向：
float: left;会使元素浮动到左侧，float: right;会使元素浮动到右侧。 - 不覆盖其他内容：浮动元素不会覆盖非浮动元素，而是让非浮动元素根据浮动元素的位置调整自己的位置。
- 宽度与高度：浮动元素的宽度和高度会影响后续内容的布局。
float 作用在 div 和 span 上的不同影响
div元素：div是块级元素，它默认占据一整行。如果对其应用float，它会脱离文档流，并根据浮动方向调整到父容器的左侧或右侧。其他元素会围绕浮动的div。span元素：span是行内元素，默认情况下它不会独占一行。对其应用float后，它会变成一个块级盒模型，并脱离文档流，浮动到父容器的左侧或右侧。其他内容会围绕浮动的span。
浮动顺序的影响
浮动元素的顺序会影响布局结果，因为浮动元素会影响其后续兄弟元素的排列。
示例 1：浮动元素在前
html复制代码<div style="border: 1px solid #ccc; width: 300px">
<div style="float: right; width: 100px; height: 50px; background: lightblue">浮动元素</div>
<p>这是一段非常非常非常常的长文本..............，它会围绕浮动元素流动。</p>
</div>布局分析：
浮动的
div（蓝色块）会脱离文档流，并浮动到右侧。p元素会根据浮动规则重新排列：
- 文本会从左侧开始流动，并在浮动元素的下方继续流动。
- 如果浮动元素的宽度占据了右侧的空间，
p元素会自动调整文本的宽度以避开浮动元素。
效果：
- 蓝色块浮动到右侧。
- 文本从左侧开始排列，围绕蓝色块流动，超出蓝色块高度后继续在其下方排列。
示例 2：浮动元素在后
html复制代码<div style="border: 1px solid #ccc; width: 300px">
<p>这是一段非常非常非常常的长文本..............，它会围绕浮动元素流动。</p>
<div style="float: right; width: 100px; height: 50px; background: lightblue">float: right</div>
</div>布局分析：
p元素会先按照标准文档流布局，占据整行宽度。div元素浮动到右侧后，由于它脱离文档流，不会影响已经完成的p元素的布局。p元素的内容不会调整以围绕浮动元素。
效果：
- 文本完整地显示在浮动元素的上方。
- 蓝色块浮动到右侧，但不会影响上方的文本。
虽然浮动的元素会脱离标准文档流，但它仍然会与非浮动元素协同工作，而不是直接覆盖它们。
浮动元素的特点
- 脱离标准文档流：浮动的元素会脱离标准文档流（类似于
position: absolute的行为），但与absolute不同，浮动元素仍然会影响其后面的兄弟元素的布局。 - 不覆盖其他内容：浮动元素不会覆盖非浮动元素，而是让非浮动元素根据浮动规则重新排布。
- 宽度限制和流动性：如果浮动元素的宽度不足以占满父容器，其后续内容会围绕浮动元素流动。
4. 如何让浮动元素和文本分离
如果不希望文本在浮动元素下方显示，可以通过以下方法解决：
方法 1：使用 clear
在文本所在的元素上添加 clear: both; 或 clear: right;，可以阻止文本环绕浮动元素。
示例：
html复制代码<div style="border: 1px solid #ccc; width: 300px;">
<div style="float: right; width: 100px; height: 50px; background: lightblue;">浮动元素</div>
<p style="clear: both;">这是一段长文本，它不会环绕浮动元素，而是从浮动元素下方开始显示。</p>
</div>效果：
clear: both;会阻止文本与浮动元素重叠，文本从浮动元素的下方开始显示。
方法 2：使用父容器的 overflow 或 clearfix
父容器可以通过以下方式来包裹浮动元素，并避免文本环绕：
- 设置
overflow: hidden;或overflow: auto;。 - 使用经典的
clearfix方法。
示例：
html复制代码<div style="border: 1px solid #ccc; width: 300px; overflow: hidden;">
<div style="float: right; width: 100px; height: 50px; background: lightblue;">浮动元素</div>
<p>这是一段长文本，它不会环绕浮动元素，而是从浮动元素下方开始显示。</p>
</div>或者使用 clearfix：
html复制代码<div style="border: 1px solid #ccc; width: 300px; overflow: hidden;">
<div style="float: right; width: 100px; height: 50px; background: lightblue;">浮动元素</div>
<p>这是一段长文本，它不会环绕浮动元素，而是从浮动元素下方开始显示。</p>
</div>5. 完整示例对比
默认行为（文本环绕浮动元素）
html复制代码<div style="border: 1px solid #ccc; width: 300px;">
<div style="float: right; width: 100px; height: 50px; background: lightblue;">浮动元素</div>
<p>这是一段长文本，它会围绕浮动元素流动，并在浮动元素下方继续显示。</p>
</div>使用 clear（文本不环绕浮动元素）
html复制代码<div style="border: 1px solid #ccc; width: 300px;">
<div style="float: right; width: 100px; height: 50px; background: lightblue;">浮动元素</div>
<p style="clear: both;">这是一段长文本，它不会环绕浮动元素，而是从浮动元素下方开始显示。</p>
</div>使用 clearfix 或 overflow
html复制代码<div style="border: 1px solid #ccc; width: 300px; overflow: hidden;">
<div style="float: right; width: 100px; height: 50px; background: lightblue;">浮动元素</div>
<p>这是一段长文本，它不会环绕浮动元素，而是从浮动元素下方开始显示。</p>
</div>总结
float: right;不会导致元素碰撞或覆盖，因为浮动元素会脱离文档流，但它仍然影响其他元素的布局。- 多行文本会在浮动元素下方显示，是因为浮动元素没有占满父容器的水平空间，文本会围绕浮动元素并在剩余空间中显示。
- 如果希望文本不与浮动元素环绕，可以使用
clear、overflow或clearfix方法。