Question

css文件是

#box {
    width:400px;
        height:200px;
        border:1px solid black;
}
#box-1 {
    width:100px;
    height:100px;
    background-color:red;
    float:left;
}
#box-2 {
    width:100px;
    height:100px;
    background-color:yellow;
}
</style>
</head>

<body>
<div id="box">
  <div id="box-1">id=box-1</div>
  <div id="box-2">id=box-2</div>
</div>
</body>

很明显，方框2与方框-1重叠问题困惑我：
1.box-1被放在box-2之前的方框中，为什么结果不是box-2重叠box-1？

2.为什么文字id=box-2不在方框-2中？如果box-2与box-1重叠且文本id=box-2在box-2中，则结果应为

请告诉我css浮动规则的原理。

Answer 1

浮动不适用于布局，仅适用于浮动元素。这是因为您遇到的问题和大多数用户都不了解。

CSS浮动的基本原理是属性离开浮动元素的正常流。此时，浮动元素时，其所在的行高将为零。我用一个例子解释你：

＆＃13;

.box {
  position: relative;
  border: 2px solid red;
  clear:both;
  margin-bottom: 40px;
}
.floated {
  float:left;
}
.box > div {
  border: 1px solid blue;
}

＆＃13;

<div class="box">
  <div class="floated">Floated div</div>
</div>

<div class="box">
  <div>Not Floated div</div>
</div>

＆＃13;

正如您在示例中所看到的，红色边框模拟了线条高度。您现在可以看到内容.floated已经离开容器.box，这要归功于此框没有高度，似乎没有内容。您还可以看到.box被清除以避免您所面临的冲突。

让我们看另一个例子。浮子的常见用途是用于网格。我不同意这种方法，但发现这种程序很常见：

＆＃13;

.grid {
  position: relative;
  width: 400px;
}

.grid.floated .element {
  float: left;
  width: 32%;
  border: 1px solid blue;
}
.grid.inline-block {
  font-size: 0;
}
.grid.inline-block .element {
  display: inline-block;
  vertical-align: top;
  font-size: 1rem;
  width: 32%;
  border: 1px solid blue;
}

.clear {
  clear: both;
}

＆＃13;

<h1>Floated grid</h1>
<div class="grid floated">
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element with different height and content</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
</div>
<div class="clear"></div>
<h1>Inline block grid</h1>

<div class="grid inline-block">
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element with different height and content</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
</div>

＆＃13;

到底是什么？如您所见，浮动网格存在问题，当其中一个元素的高度高于其他元素时，元素的堆栈。这会导致很多问题。另一件事是我们需要在它结束后清除它们。

您可以看到内联块网格。没有浮动网格问题。您具有正确的行高，元素在文档的正常流程中，堆栈遵循正确的顺序，您不需要清除任何内容。

另一个常见的浮动问题

如果您使用浮动启动布局，则需要浮动所有后续元素，至少如果您不是每次都清除所有内容。浮动元素转换为块元素。你可以得到一个<span>标签（内联元素），如果你浮动它，你将在图层堆栈中获得一个块元素（作为<div>）（图层堆栈由漂浮物，绝对定位，不透明等）。如果您不了解花车如何工作，这会导致很多问题。

结论和建议

结论是浮动是一个很好的工具来制作浮动元素（如左边的图像，右边的文字跟随文字），当网络浏览器不接受内联时浮动效果很好 - 阻止或flexbox或其他现代技术布局，但在2016年，没有理由使用浮点数进行布局。我的建议是使用其他技术（位置，显示，flexbox，内联块元素等），浮点数只能用于浮动普通元素。

祝你好运！

为什么文本id = box-2超出了盒子2？浮点数在css上的重叠规则

1 个答案:

另一个常见的浮动问题

结论和建议