Question

<div style="background-color:black">
   <div style="float:right">
       Test message
   </div>
<div>

这将显示带有白色背景的“测试消息”，因为父div不符合内容。

如何使div适合内容？（不使用table或display：table，因为它在IE中不受支持）

Answer 1

你也可以这样做：

<div style="background-color:black; overflow: auto;">
   <div style="float:right">
       Test message
   </div>
<div>

这是一种更清晰的方法来执行clearfix：）

Answer 2

一个常见的解决方案是在浮动元素之后放置一个<br style="clear: both;"> 来清除浮动并导致父元素包装元素。

<div style="background-color:black"> <div style="float:right"> Test message </div> <br style="clear: both;"> <div>

除了这个问题，我建议将样式放在一个单独的CSS文件中，如果还没有实现的话。

Answer 3

听起来这是旧的 clearfix 问题。当使用css和float用于布局时，这几乎是必需的。有关简要说明和修复，请参阅http://www.webtoolkit.info/css-clearfix.html。或者更深入一点，请参阅此处http://www.positioniseverything.net/easyclearing.html

内部有浮动Div的Div不适合内容

3 个答案: