Div清除浮动，即使没有设置清除属性 [英] Div Clears Float Even Though No Clear Property is Set

问题描述

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

This is way-too-basic question, but the behavior of the div on my website leaves me perplexed.

我之前遇到过相同的问题，所以我我肯定我做错了，一贯地，或误解一些基本的CSS规则。

I've experienced identical issue before, so I am sure I am doing something wrong, consistently, or misunderstanding some fundamental CSS rule.

问题：为什么网站右下角附近的红色div标记会清除左侧对应标记？没有清除规则应用于它！

Question: Why does the red div tag near the bottom right of the site clears its left counterpart? There's no "clear" rule applied to it!

这里是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;
}

推荐答案

正确的对手。这是因为如果元素浮动，它将基本上在页面的整个宽度上延伸一个边距。

The left div is actually clearing the right counterpart. This is because if the element is not floated, it will basically take on a margin stretching across the entire width of the page.

两个解决方案：

1. 添加 float：left c> c $ <$ c>


2. 添加 display：inline-块到下红色框左侧的 div 。

1. Add float: left to the div on the left side of the red box.
2. Add display: inline-block to the div on the left side of the lower red box.

这篇关于Div清除浮动，即使没有设置清除属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！