清除对我的潜水器不起作用

Clearing is not working on my div

本文关键字：不起作用 潜水 我的 清除      更新时间：2023-09-26

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

http://jsfiddle.net/w5K4j/14/

#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;*/
}

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

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

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

这是更新的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

希望这对你有帮助！

这就是您想要的吗？

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

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