Question

我有一个代码片段，我正在尝试清除黄色的橙色div。为什么清楚：左边不工作？

#parent {
    height:300px;
    width:100px;
    float:left;
    border: 1px solid;
}

#unknown {
    float:right;
    height:50px;
    width:20px;
    clear:left; /* Shouldn't it make child(orange) div to float under? */
    background-color: yellow
}

#child {
    float:right;
    height:100px;
    width:50px;
    background-color: orange;
    /*text-align: center;*/
}

Answer 1

如果我理解正确，您应该清除#child并使用right值：

#child {
    float:right;
    clear: right;
    height:100px;
    width:50px;
    background-color: orange;
    /*text-align: center;*/
}

http://jsfiddle.net/w5K4j/15/

Answer 2

以下是updated fiddle

不是清除元素中的浮点数，而是创建一个可以随时使用的类。

使用<div class="clearfix"></div>清除需要的浮动

以下是对小提琴的改动

<强> HTML

<div id="parent">
<div id="unknown"></div>
<div class="clearfix"></div>
<div id="child">
    <h3>Click this overflowing text that I'd like to V/H center when rotated</h3>
</div>
</div>

<强> CSS

#unknown {
float:right;
height:50px;
width:20px;
//removed clearance
background-color: yellow
}

.clearfix{clear:both;} //added new class

希望这能帮到你！

Answer 3

这就是你要找的东西吗？

http://jsfiddle.net/w5K4j/25/

#unknown {
float:right;
height:50px;
width:20px;
clear:left;
background-color: yellow;
clear:both; float:none;
}

清算不适用于我的div

3 个答案: