Question

我是CSS新手。我有一个Top，Right和Content div。我希望它看起来像这样：

Top     Right

Content

然而，它显示如下：

Top Content Right

我知道我需要一个明确的地方，但我不确定在哪里，因为我不清楚实际上是如何工作的，所以有人可以解释下面的html代码我将应用清楚的地方，我会有什么样的清楚选择（左，右或两者）。这是精简的HTML代码：

<div style="float:left; width:600px; height:100px; 
            border:1px solid black;">Top</div>
<div style="float:right; width:200px; height:800px; 
            border:1px solid red;">Right</div>
<div style="width:500px; height:600px; 
            border:1px solid blue;">Content</div>

Answer 1

将clear放在内容<div>上：

<div style="float:left; width:600px; height:100px; 
            border:1px solid black;">Top</div>
<div style="float:right; width:200px; height:800px; 
            border:1px solid red;">Right</div>
<div style="width:500px; height:600px; clear: both;
            border:1px solid blue;">Content</div>

这会推送内容<div>，使其位于任何浮动元素下方（从左侧或右侧）。

附注：为方便起见，您可能应该使用CSS类或id属性，而不是使用style进行内联。

Answer 2

虽然它并非在所有情况下都有效，但WebToolkit's clearfix技术有助于缓解大部分问题。

用法

<div class="clearfix">
  <div style="float:left;">left</div>
  <div style="float:right;">right</div>
</div>
<div>
  Some block content that doesn't overlap the floats
</div>

另见demo

代码

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Answer 3

放置一个在右边div之后清除的DIV：

<div style="float:left; width:600px; height:100px; 
            border:1px solid black;">Top</div>
<div style="float:right; width:200px; height:800px; 
            border:1px solid red;">Right</div>
<div style="clear:both;"></div>
<div style="width:500px; height:600px; 
            border:1px solid blue;">Content</div>

有人可以详细解释这段代码中清晰的工作原理吗？

3 个答案:

用法

代码