css float属性设置问题？

Posted 2023-05-12

<img src="./2.jpg" alt="" width="100px" height="100px"><div class="first"></div> <style> .first width: 200px; height: 100px; border: 3px solid red; float: left; </style>出来的结果为什么是图1这种效果，而不是矩形在图片之上呢

float的本意其实是环绕，float:left 当前元素之前的行内元素以及当前元素之后的行内元素或块级元素都会在当前元素的右边环绕（也可以理解为当前元素浮动到其他元素的左边，其他元素自动“让”出一个空位给当前元素），而 float:right 则是在当前元素的左边环绕。
要想让矩形在图片之上，不能用float，要用定位，即把 float: left 改为 position:absolute; left:0; top:0 参考技术A

因为你div用了float ,所以div 会浮动到图片的左侧。

你想实现矩形在图片之上，需要改动

<div class="first"><img src="./2.jpg" alt="" width="100px" height="100px"></div> <style> .first width: 200px; height: 100px; border: 3px solid red;</style>

将图片放在div里面即可

Float 可以去掉了。

CSS选择样式=“float:left”的图像可能吗？

【中文标题】CSS选择样式=“float:left”的图像可能吗？

【英文标题】：CSS Select Images with style="float:left" possible?

【发布时间】：2011-04-12 10:32:39

【问题描述】：

与选择img[title="test"] 类似，我能否以某种方式选择样式属性为float 设置为left 的图像？

我想为它们设置不适用于右浮动图像的左右边距。

谢谢。

【问题讨论】：

是什么将它们设置为float: left？那不也可以将左边距和下边距设置为0吗？

这是一个用于执行此操作的 CMS 界面，对于某些用户来说设置边距有点复杂。另外 CMS 界面只允许设置水平。和垂直。同时边际。所以两个两个不是每个。

【参考方案1】：

没有 JS 是不可能的。不过，您可以在图像或其父级上设置一个类并制定规则。

【讨论】：

它们是用户通过 CMS 放置的图像。

【参考方案2】：

使用这个：

img[style~="float:left"] 
  margin: 5px 15px 0px 0px;


img[style~="float:right"] 
  margin: 5px 0px 0px 15px;

您可以在以下网站之一阅读所有有关 CSS2 选择器的信息：

CSS2 attr selector examples at quirksmode CSS2 attr selector reference from w3.org

【讨论】：

如果浮动不在 CSS 文件和内联样式标签中，这将起作用。

如果它在 CSS 文件中，您可以编辑类，并且可能不需要这个问题。

【参考方案3】：

Peter W 解决方案需要这样修复：（将 ~= 更改为 *= ）

img[style*="float:left"] 
  margin: 5px 15px 0px 0px;


img[style*="float:right"] 
  margin: 5px 0px 0px 15px;

唯一的问题是它完全匹配，所以float:right 会匹配，而float: right 不会（注意额外的空格）。

我在 Chrome 和 IE9 中测试成功，但是在 IE emulation 模式下无法工作...

【讨论】：

对排版样式很有帮助！

【参考方案4】：

只是稍微扩展一下，这是我一直用于所有图像的内容。它捕获浮动以及对齐的图像。

img[align="left"],
img[style*="float: left"],
img[style*="float:left"]
    margin: 5px 15px 0px 0px;

img[align="right"],
img[style*="float: right"],
img[style*="float:right"]
    margin: 5px 0px 0px 15px;

【讨论】：

没问题。我喜欢它背后的想法，但一开始并没有奏效。我认为其他人可能不会花太多时间来调试它......

这是最好的通用解决方案，非常适合具有所见即所得内嵌图像的 CMS 系统。

使用内联样式和 CSS 压缩（例如，打开 Drupal 的“聚合和压缩 CSS 文件”）可能会有点危险。空格将从第一条规则中删除，实质上是复制规则。如果用户在内容正文中添加的任何内联样式有空格，则它们将不再匹配，您对此无能为力。

空白被剥离实际上是 Drupal 的 CSS 压缩器中的一个错误。我在 D7 中为它写了一个补丁，而 D8 目前正在进行中。

这适用于来自样式表的 CSS，还是仅适用于内联？