Css 当我们将float赋给父元素以清除float时，为什么float的行为与其他选项不同？

在本例中，没有为父元素定义宽度

如果我想在容器边框中包装红色框。

那么我们可以用5种方法来实现这一点

• 给

  浮动

  也给

• 溢出：隐藏

  或

  溢出：自动

• 任何针对

• 给予高度

• 在2之后再添加一个html元素（例如另一个

  div

  或
  ）
  中的框在此处输入代码

  并给出
  

  清除：左

  或

  ：两个

  或

  ：右` 元素

我的问题是除了

浮动

之外的任何其他选项都不要对

和内框宽度进行任何更改。但是如果我们使用

float:left

或

right

作为父框，那么它也会收缩整个框和内部框

为什么?

示例链接：

---

编辑：我的问题不是我应该使用哪种方法，问题是为什么浮动缩小宽度

如果不在容器上使用浮动，则宽度设置为100%。如果添加浮动，则只占用所需的空间。在这种情况下，宽度由内部的两个div计算

要在容器边框中包装红色框，除了向容器添加浮动外，没有其他选项。唯一的其他选择是绝对定位所有元素，但在这种情况下，您必须事先知道所有元素的宽度和高度。所以这真的不是一个选择

---

因此，我的建议是在容器上使用float，并在容器后面的元素上添加clear:tware。

最好的办法是始终清除float。在用class.container关闭div之后，在用class.container关闭div之前，添加一个新div，如下所示：

<div class="clear"></div>

---

编辑：很明显，就像你上一个例子一样。：）

我认为更好的选择是使用overflow:hidden。这是一个简单的单线变化，它的工作

div#container {
    ...
    overflow: hidden;
}

为clear fix添加额外的

div

s需要更改html中真正的css。或者，当使用clear fix时，通过执行如下黑客操作

div:after {
    content:....
    ...
}

你的css越来越大，越来越混乱。但它仍然是一个不错的选择（特别是当你需要有东西溢出盒子时）

参考：

---

哇。我不知道那会起作用。事实上，我认为这是行不通的，所以我不得不亲自去测试一下。如果不是我所有的

很高兴我能提供帮助，请查看我添加的新链接以了解更多信息我的问题是为什么float会缩小宽度？我会保留clearing div，直到每个浏览器都支持内容：after。从现在起，这将是很多年以后的事情：（我的问题是为什么float会缩小宽度？“如果你添加一个float，它只占用它所需要的空间。在这种情况下，宽度是由里面的两个div计算的。”请进一步解释。让一个元素浮动，你会使它像一个带有“display:inline block”的元素。作为一个带有“inline block”的元素没有固定宽度（如内联元素）它只自动获取其内容所需的宽度和高度。好吧，那么为什么它会离开此空间，因为您已将宽度设置为容器DIV的45%。DIV中的文本将占据每边的50%，这就是容器DIV的宽度的计算方式。但使用45%后，文本将换行。容器DIV的宽度如果内部div的宽度仍为50%，r div将保持相同的宽度。

div:after {
    content:....
    ...
}