Question

考虑以下HTML代码：

<div id="footer1">   
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
  </div>

   <div id="footer2">         
         Lorem ipsum dolor sit amet, consectetur adipisicing elit
   </div>  

   <div id="footer3">     
     Lorem ipsum dolor sit amet, consectetur       
   </div>

及其响应的CSS：

body{
    padding: 30px;
    font-size: 0.9em;
    line-height: 1.6em;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background-color:#222;
}

#footer1{
    float: left;
    width: auto;
    margin-top: 0;
    margin-bottom: 50px;
    margin-right: 10%;
    margin-left: 10%;
    color: #FFF;
    text-align: justify;
    border: thin dashed #DDDDDD;
}
#footer2{
    float: none;
    width: auto;
    margin-top: 0;
    margin-bottom: 50px; 
    margin-left: 2%;
    margin-right: 2%;
    color: #FFF;
}
#footer3{
    float: none;
    width: auto;
    margin-bottom: 10px;        
    margin-left:12%;
    margin-right:12%;
    color: #FFF;
}

您可能会在http://jsfiddle.net/KnUfY/看到相应的小提琴;但就我的问题而言，这还不够说明。

那么，这是我的问题？
我使用Mozilla Firebug来突出显示每个div占用的浏览器区域。我发现#footer2区域（带边距的内容）始于同一个地方，就好像#footer1不存在一样。到目前为止一直很好，因为#footer1被认为是不合时宜的。

我的问题是：我认为#footer3的行为类似于#footer2，即其区域不是在#footer2之后开始，而是以＃34}包括＆＃34; #footer1和#footer2个区域。换句话说，#footer3表现得像浮动已被清除;然而，这种清除是如何发生的？

这始终是我的疑问之一！如果我们不用经典方法（溢出：auto，clear，after，...）清除它，浮动影响何时结束？浮动受影响后，只有第一个div？第二个自动清除浮动？

谢谢

Answer 1

你正在使用 float：none 这对css来说是不可读的你必须使用 clear：both（left / right / both）来移除浮动。最好的方法这是通过使用此clearfix：

.clear {
  zoom: 1;
}
.clear:after {
  display: block;
  content: "";
  height: 0;
  clear: both;
}

将此 .clear class 放在ur floated element / s的parrent上！

如果你有兴趣，有一种更好的方法来连续排列你的元素。我认为最好的方法是使用 display：inline-block ，请参阅here。然而，对于内联块元素，存在一个小错误＆＃34; here之间的空格是如何修复它的信息：）

浮动后的第二个div

1 个答案: