<div id="parent">
  <div id="child">A</div>
</div>

<div id="next">B<div>

#child {
  float: right;
}

以上代码生成的样式如下 (示意) :

|--------------|  <- 父元素高度为 0
|-B-        -A-|  <- 子元素有高度, 但设置了浮动, 导致 #next 位置不符合预期

解决方法

1. overflow:hidden

给 #parent 设置 overflow:hidden , 原理是通过 overflow 创建了一个块格式化上下文 (block formatting context) , 在计算 overflow 高度时计入了子元素的高度

|--------------|
|           -A-|
|--------------|
|-B-           |

2. clear: both

给 #next 设置 clear:both , 可以解决 #next 的位置问题.

缺点:

样式设置在别的元素上, 不能自动适应.

3. float:left

给 #parent 也设置浮动, 浮动元素高度的计算会包含子元素高度.

其实 float:left 也创建了一个块格式化上下文, 具体可参考 REFERENCE

缺点:

父元素也是浮动, 有时候会引起意料之外的问题

4. clear:both

在父元素的最后添加一个子元素, 并设置 clear:both , 原理是最后一个子元素会定位到所有子元素以下, 变相撑开了父元素高度.

缺点:

多一个 DOM 元素

REFERENCE:

Block Formatting Context