div+cssの問題について専門家の方にお聞きしたいです。 _html/css_WEB-ITnose

请问高手，先看下代码：
home2.html:



 
  
  
 

 
  

  

  优酷牛人更多牛人
  

  
• 
  音乐热

  
• 
  新闻直播

  
• 
  互联网

  

  

  

  
  优酷牛人更多牛人
  

  
• 
  音乐热

  
• 
  新闻直播

  
• 
  互联网

  

  

 

home2.css代码：
body
{
width:1024px;
高さ:750ピクセル;
境界線:1 ピクセルの青一色。
マージン:0 自動;
パディング:0;
表示:ブロック;
}
.div1
{
width:300px;
高さ:360ピクセル;
ボーダー: 1 ピクセルのソリッドシルバー。
padding-top:2px;

}

.faceul
{
padding-left:0px;
margin-left:20px;
}
.faceul li

{
text-align:center;
フロート:左;
list-style-type:none;
パディング:0px;
}
.faceul li img
{
margin-left:20px;
マージン右:15px;
幅:50ピクセル;
高さ:50ピクセル;
境界線:1 ピクセルの黒の実線。
margin-bottom:3px;

}
.span1
{

margin-left:2px;



}
.font1
{
font-size:16px;
フォントの太さ:太字;
margin-left:5px;
padding-top:10px;
色:黒;
テキスト装飾: なし;

}
.faceul li a
{
display:block;
テキスト装飾: なし;
}
.span1 a
{
text-decoration:none;
フロート:右;
}
下の代コードが火狐猛秈器内で実行された後、問題が発生しました: 最初の画像に移動した状態は他の状態ではなく、その 2 つは成功し、さらに、最初の div 内のスパンを超えています接続中は右の表示に正常に浮動することができます。
ボディ{
幅:1024px;
高さ:750ピクセル;
境界線:1 ピクセルの青一色。
マージン:0 自動;
パディング:0;
表示:ブロック;
}
.div1
{
width:300px;
高さ:360ピクセル;
ボーダー: 1 ピクセルのソリッドシルバー。
padding-top:2px;

}

.faceul
{
padding-left:0px;
margin-left:20px;
}
.faceul li

{
text-align:center;
フロート:左;
list-style-type:none;
パディング:0px;
}
.faceul li img
{
margin-left:20px;
マージン右:15px;
幅:50ピクセル;
高さ:50ピクセル;
境界線:1 ピクセルの黒の実線。
margin-bottom:3px;

}
.span1
{

margin-left:2px;



}
.font1
{
font-size:16px;
フォントの太さ:太字;
margin-left:5px;
padding-top:10px;
色:黒;
テキスト装飾: なし;

}
.faceul li a
{
display:block;
テキスト装飾: なし;
}
.span1 a
{
text-decoration:none;
フロート:右;
}

回复讨论(解决方案)

第一div下面加一明確浮動
style=“clear：both”

第一div下面加一明確浮動
style=“clear：both”
これはどういうことですか?

float (浮動) 他は、指定された要素を脱离して普通の文档流を行うために生成された特定の布局の特性を利用します。時々、私はこのような特別な布局の方法を必要としますが、ある種のブラウザでは、他の布局に影響を与えることがあります。これらは他のものに影響を与えません。完了した後にこの浮遊要素を削除する必要がありますstyle=“clear:both”
これは浮遊を削除するための指示です

clear 定義要素の一方は他の浮遊要素を許可しません。
style=“clear：both”関数のオブジェクトが配置されている行は、他のモジュールの浮動を許可しません (つまり、両側で浮動を許可しません)。
1 つの Div 内に複数の Float オブジェクトがある場合、

...< のようになります。 ;/diV> のコードセグメントがスイッチングに相当します。