css：将图像向左浮动 - 问题答案

【问题标题】：css: float image to the left - problemcss：将图像向左浮动 - 问题
【发布时间】：2011-03-27 06:20:12
【问题描述】：

我正在尝试做类似的事情：

--------------------------------------------
| --------- text text text text text text  |
| | image | text text text text text text  |
| |       | text text text text text text  |
| |       | text text text text text text  |
| --------- text text text text text text  |
| text text text text text text text text  |
| text text text text text text text text  |
--------------------------------------------

标记应该是正确的：

<div>
    <img src='myimage.jpg' style='float:left;'>
    tex text text ..
</div>

问题是 - 如果只有几个文本，图像将从容器 div 中“浮出”，看起来像这样：

--------------------------------------------
| --------- text text text text text text  |
| | image | text text text text text text  |
|_|       |________________________________|
  |       |
  ---------

有什么办法可以解决这个问题吗？对我来说唯一的解决方案似乎是设置 div 容器的最小高度。谢谢

【问题讨论】：

标签： css image css-float

【解决方案1】：

div {
    overflow: hidden;  /* except IE6 */
    display: inline-block; /* IE6 */
}
div {
    display: block; /* IE6 */
}

【讨论】：

【解决方案2】：

用style="clear:both;在div元素的末尾添加一个空元素，就像这样：

<div>
    <img src='myimage.jpg' style='float:left;'>
    tex text text ..
    <div style="clear:both;"></div>
</div>

【讨论】：

这也是一个有效的解决方案，尽管它使标记复杂化。我遇到过溢出技巧不适合我需要的情况，需要div 和clear: both。
确实很有帮助的答案。除了不要在您的 HTML 代码中添加 CSS 代码 clear:both; 内联。像往常一样，在您的 CSS 文件中执行此操作。就我而言，我在</main> 之前添加了清除<div>，如下所示：
。在我的 CSS 文件中，我有 .clearboth {clear: both;}.
再想一想，鉴于您不想依赖于能够更改 HTML 代码，可能值得考虑clearfix:https://css-tricks.com/snippets/css/clear-fix/。不幸的是，我现在没有时间尝试它。
实际上，我解决了没有对 HTML 代码进行 any 更改。诀窍是将overflow: auto; 添加到“溢出”<div> 标记（在我的情况下为<aside>）的 parent 中。就像这样，main {overflow:auto;}。（在我的例子中，<main> 是父标签。）

【解决方案3】：

【讨论】：