两个div设置了float:left不并排的原因

### CSS Float Left 布局用法 当应用 `float: left` 到 HTML 元素上时，该元素会尽可能靠左浮动，并允许其他内容环绕在其右侧。这种特性常用于创建多列布局或使图像与其他文本并排显示。 对于 `.two { background-color: aquamarine; float: left; }` 的定义[^1]，此样式会使具有此类名的 `<div>` 向左侧移动直到遇到父容器边界或其他已浮动的内容为止。如果后续兄弟节点未设置清除属性，则它们可能会围绕着这个浮动静态定位框流动。 #### 清除浮动的方法 由于浮动元素可能导致其父级无法正确计算高度而发生塌陷现象，在实际开发过程中通常需要采取措施来防止这种情况的发生： - **使用额外标签清除** 可以在一个封闭区域内部增加一个新的空 `<div>` 并赋予它 `clear:both` 属性，从而阻止任何进一步的内容绕过前面已经设置了浮动特性的对象。 ```html <div style="clear:both;"></div> ``` - **利用伪类清除** 更加优雅的做法是采用`:after`伪元素配合clearfix技术实现自动清理效果而不必引入多余标记结构。 ```css .clearfix::after { content:""; display:block; clear:both; } ``` 上述两种方式均能有效处理因子项漂移所引发的高度丢失问题[^5]。 #### 浏览器兼容性考量 值得注意的是，在某些较老版本浏览器（如 Internet Explorer 6）中可能存在特定 bug ，例如3像素偏移错误；针对这类情况可以通过调整外边距(`margin`)参数来进行修正[^4]: ```css .left { float: left; width: 100px; margin-left: -3px /* 解决 IE6 下可能存在的三像素间隙 */; } ``` 此外还有更多关于不同平台间差异化的解决方案可供参考学习[^3]。 ### 实际案例分析 考虑这样一个场景：有一个包含两个子部分 (`<div>`) 的父容器，其中左边的部分被指定为向左浮动，右边则保持正常流内排列。为了确保整体布局稳定可靠，可以按照下面的方式编写相应代码片段[^2]： ```html <div class="parent"> <div class="left"><p>Left</p></div> <div class="right"><p>Right</p><p>More Right Content...</p></div> </div> <style> .parent {} .left { float: left; width: 100px; } .right { overflow: hidden; } </style> ``` 这里通过给`.right` 设置 `overflow:hidden` 来间接触发BFC (Block Formatting Context)，进而避免潜在的溢出风险以及由浮动引起的各种异常状况。