文章/答案/技术大牛

发布

css浮动无效

CSS浮动无效的基础概念

CSS浮动（Float）是一种布局技术，它允许元素脱离正常的文档流，并可以左右浮动，常用于图文混排、多栏布局等场景。

类型

左浮动（left）：元素向左浮动。
右浮动（right）：元素向右浮动。

应用场景

图文混排：在新闻网站或博客中，图片和文字并排显示。
多栏布局：在电商网站或新闻网站上，使用浮动实现多栏布局。
导航栏：浮动可以用于创建水平导航栏。

浮动无效的原因及解决方法

1. 父元素没有清除浮动

原因：当子元素浮动后，父元素的高度会塌陷，导致浮动无效。

解决方法：

.parent {
  overflow: hidden; /* 或者使用 clear: both; */
}

2. 浮动元素过多

原因：当页面中浮动元素过多时，可能会导致布局混乱。

解决方法：

.parent {
  display: flex; /* 使用Flex布局 */
}

3. 浮动元素与其他元素重叠

原因：浮动元素可能会与其他元素重叠，导致布局问题。

解决方法：

.non-float-element {
  clear: both; /* 清除浮动 */
}

4. CSS选择器问题

原因：可能是CSS选择器没有正确选中需要浮动的元素。

解决方法：

.float-element {
  float: left; /* 或者 float: right; */
}

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Float Example</title>
  <style>
    .container {
      overflow: hidden; /* 清除浮动 */
    }
    .float-element {
      float: left;
      width: 100px;
      height: 100px;
      background-color: red;
      margin-right: 10px;
    }
    .non-float-element {
      clear: both;
      height: 50px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="float-element"></div>
    <div class="float-element"></div>
    <div class="non-float-element"></div>
  </div>
</body>
</html>

参考链接

通过以上方法，可以有效解决CSS浮动无效的问题。如果问题依然存在，建议检查CSS选择器和HTML结构是否正确。

页面内容是否对你有帮助？

有帮助

没帮助

不知道为什么Div不向右浮动

html、css

我对一个特殊的div有一个问题，它不会向右浮动。我已经尝试删除div和其他方式，但它仍然不能工作。下面是我使用的以下css和html代码： #sidebarright{ width

浏览 3提问于2016-06-23得票数 0

回答已采纳

1回答

css选择表单控件(如果不为空

html、css

0, -100%, 0); } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css，占位符返回到初始状态，并定位在无效输入上。所以我们的想法是在输入无效的情况下也应用浮动占位符。在电子邮件输入无效的情况下，如何维护浮动占位符？如果我将：.form-control:invalid + .form-con

浏览 47提问于2018-07-08得票数 1

回答已采纳

2回答

Div未自动扩展，因为内容是动态加载的

php、html、sql、css

我有点小问题...我的内容是从Sql语句返回的，并且它没有扩展到适合它的高度，一个有效的非动态版本是 min-height:50px; margin:20px auto; border:1px solid #999;我的代码如下(它在一个for循环中，为每个实例创建一个新的div ) // Now lets query to grab the responses to this f

浏览 1提问于2011-09-22得票数 0

回答已采纳

1回答

TYPO3:一个页面上的两个新闻插件混在一起

typo3、tx-news、tt-news

我有一个由两个新闻插件组成的页面(extension = " news "，typo3 version = "6.2.38")。我已经在后端创建了这两个插件。这两个新闻插件都有相同的文件夹作为他们的文章来源。我已经为源文件夹中的文章分配了“类别”。现在，第一个插件应该显示"A“类的项目，第二个插件应该显示"B”类的项目。只激活插件2：我只看到预期的"B“类文章。只激活插件1：我只看

浏览 2提问于2018-08-14得票数 1

回答已采纳

1回答

调整SVG背景图像的大小

html、background、svg

请查看CSS以了解我是如何尝试调整图像大小的。我不确定如何使中心的“内容”(文本和标题栏)浮动在SVG图形的中心之上。最好是尝试将内容居中并浮动在标志背景上；或者我是否希望在背景图像上设置框大小？或者，有没有更简单的方法使中心的内容“浮动”在背景中的缅甸的SVG旗帜之上(这些是我尝试定位背景和内容的无效css规则) background-image: url

浏览 3提问于2012-05-03得票数 1

1回答

我是否正确使用了绝对和相对位置？

css

我应该让容器div内的盒子浮动吗？另外，如果你能回答这个问题，我希望在大屏幕上观看时，粉色框紧挨着蓝色框，但当浏览器最小化时，我希望粉红色框落在蓝色框下面。

浏览 0提问于2016-07-11得票数 3

1回答

jquery浮动标签电子邮件

jquery、html

日安，我尝试过css的解决方案，比如添加伪类..mat输入-外部输入：无效的+ label，但最终会在页面加载时将类应用于每个标签。

浏览 1提问于2018-09-10得票数 0

回答已采纳

3回答

不能移动html图像，我不知道为什么

html、css

我已经做了CSS和HTML代码，所以这个标志图像，我有向右移动。 right: 200 px;} <link rel="stylesheet" type="text/css" href="template.css"> &l

浏览 6提问于2014-10-29得票数 0

回答已采纳

1回答

CSS选择器的转义语法

css、css-selectors、less

用来转义CSS属性的tilde (~)和方法似乎工作得很好，但是如果我希望CSS选择器包含一个数字(或者其他我不想忽略的东西)，该怎么办呢？更新：结果是，启动一个CSS标识符(选择器中的元素名称、类、in )不允许使用数字或连字符，后面跟着数字。见这个问题：

浏览 0提问于2011-11-27得票数 0

2回答

<div>包装器动态高度

html、css

编辑:这是sidemenu类的CSS float: left; margin-top: 20px;

浏览 4提问于2012-10-19得票数 0

回答已采纳

3回答

放置浮点属性后按钮不起作用

html、css

我有一个媒体查询，我的两个按钮将位于屏幕的相对两侧，所以很明显我必须在按钮上使用浮动属性。起初我只是在一个按钮上放了一个向左的浮动，但这并没有使两个按钮居中，所以我继续往前把一个向右的浮动放在另一个按钮上。这样做之后，按钮就不工作了。

浏览 0提问于2014-03-04得票数 0

1回答

IE 8 bug？元素捕捉到位

javascript、html、css

我在IE 8中的页面上的CSS遇到了一些问题。我有一个文本字段漂浮在左边，一个“下一步”按钮漂浮在右边，下面我有一些文本在一个单独的div中。padding: 2px; float: right;} 如您所见，这两个元素已经浮动

浏览 0提问于2011-05-19得票数 0

1回答

如何验证具有日期时间值的属性必须具有TZID参数？

icalendar

DTSTART属性具有日期时间值.下面是一个实例：这是一个具有“浮动”时间的有效属性吗？或者，它是一个错误地忘记包含TZID参数的带有“浮动”时间的无效属性吗？在验证iCalendar文件时，如何区分值为“浮动”时间的有效属性与具有“浮动”时间而错误地忘记包含TZID参数的值的无效属性？

浏览 6提问于2017-08-21得票数 0

回答已采纳

2回答

离子离子输入标签不呈现

ionic-framework

floating>Floating Label</ion-label> </ion-item> 只出现浮动标签，但输入效果无效，我无法键入任何内容。此外，使用输入标记的输入样式是粗体，而在我自己的css中不更改默认样式。

浏览 10提问于2016-11-18得票数 0

回答已采纳

1回答

我需要使父CSS文件的效果无效(而不是抵消)

html、css、bootstrap-4、css-float

<span class="breadcrumb-item active"> خریداری </span></div>.breadcrumb-item {}我想让它浮动的地方:对。所以我在我的shop.css中做的是：float: right;但事情并没有按计

浏览 7提问于2020-05-11得票数 0

2回答

有没有可能将HTML内容包装成DIV或其他格式，而不破坏页面布局？

html

文档包含一些HTML元素。我需要将一些元素包装到DIV (或任何其他HTML元素)中，以便该文档的布局仍然有效。这是完全可能的吗？<div style="float:left;">Left DIV</div>我需要这样的东西，这样文档布局仍然有效，右侧DIV用虚线边框突出显示：<d

浏览 2提问于2010-12-29得票数 0

回答已采纳

3回答

使用浮动将表列替换为DIV和CSS？

css

我有一个div和css的问题，特别是浮动..我需要转换一个大量使用表格、列和行的页面，我的想法是为每一列创建一个div，但当然我需要浮动这些。对不能正确浮动的div使用Width / Height是不是很好的做法？？或者使用min-height更好？当然，我的想法是将所有css内容删除到css外部样式表中，所以我假设我需要给每个div和I

浏览 1提问于2009-12-10得票数 3

4回答