Question

这是一个太基本的问题，但我网站上div的行为让我感到困惑。

之前我遇到过相同的问题，所以我确信我做错了什么，一贯做错了，或者误解了一些基本的CSS规则。

问题：为什么网站右下方附近的红色div标签会清除其左侧对应的？没有适用的“明确”规则！

这是html：

<div id="home-left">
<?php 
echo "Some php=generated content";
?>
</div> <!-- END HOME-LEFT -->

<div id="home-right-container">
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div> <!-- END HOME-RIGHT-CONTAINER -->

这是相应的CSS：

#home-left {
width:280px;
margin:0 0 0 20px;
//clear:both; /* STAY CLEAR OF THE SCROLLER-FEATHER-CONTAINER! */
}

#home-left h3 {

    //font-size: 1.128571429rem;
font-size:12px;
    line-height: 1.2;
    font-weight: bold;
text-transform:uppercase;
margin-bottom:10px;
}

#home-left p {
    margin: 0 0 24px;
    margin: 0 0 1.514285714rem;
font-size:11px;
    line-height: 1.5;
}

#home-right-container {
width:100px;
background:red;
float:right;
}

Answer 1

左边的div实际上正在清除正确的对应物。这是因为如果元素不是floated，它将基本上占据页面整个宽度的边距。

两个解决方案：

将float: left添加到红色框左侧的div。
将display: inline-block添加到红色下方框左侧的div。

Answer 2

因为它位于文档流中右侧的元素之后。

您可以切换元素顺序，这将为您提供所需的结果。或者将另一个元素浮动到左侧，这也可以给出你想要的结果。

Answer 3

float允许元素浮动到它下面的元素的一侧，而不是它上面的元素。

如果你漂浮#home-left left，右边的div将是右边的

Answer 4

只需在style.css第235行添加float：left。希望这有助于。

即使没有设置明确属性，Div清除浮动

4 个答案: