css浮动的问题？？

Posted 2023-04-13

a标签本是一个内联元素，设置float后就变成了块元素，可以设置宽、高等属性，你去掉floa后，它就默认为内联元素，其宽、高等属性失效，只会根据文本的宽度自动调节。当然你可加上这样的css语句：display:block;这样所设的宽度width:7em;就会有效了。 参考技术A 浮动的工作原理
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框则停留。
浮动元素可能引起的问题
1.父元素的高度无法被撑开，影响与父级元素同级的元素
2.与浮动元素同级的非浮动元素会跟随其后
3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面的显示结构

清除浮动有什么解决办法？
一般来说有三种办法。
1.使用空标签清除浮动
在所有浮动标签后面添加一个空标签并定义CSS属性 clear:both

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

【中文标题】css：将图像向左浮动 - 问题

【英文标题】：css: float image to the left - problem

【发布时间】：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 容器的最小高度。 谢谢

【参考方案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】：