[CSS]クリアフロントエンドフロート

何をして浮いています

一般的に使用ボックスCSSフロートフロートプロパティが、親が生じると、カセットが軟化できないオブジェクトので、CSSフロートフロートが生じます。
理由だけで、フローティングフロートの使用を、置く:右または両方を生産しているフロート:左またはフロート。

浮動2の負の効果

  • 親が軟化することができない、背景は表示できません
  • 親サブセットフローティングフレームが軟化することはできません
  • マージン、パディングの設定値を正しく表示することができません

浮動をクリアするには、3つの方法

親クラスの1は非常に高サブクラスを含むことができます。

このアプローチは、高度数が必要です

.divcss5{ width:400px;border:1px solid #F00;background:#FF0; height:102px}  //这里高度算好102px
.divcss5-left,.divcss5-right{width:180px;height:100px; 
border:1px solid #00F;background:#FFF} 
.divcss5-left{ float:left} 
.divcss5-right{ float:right} 

2.clear:両方の透明フロート

このアプローチは、タグ付けやスタイルを必要とし
ますが、最初のスタイルセレクタを必要とします

.divcss5{ width:400px;border:1px solid #F00;background:#FF0} 
.divcss5-left,.divcss5-right{width:180px;height:100px; 
border:1px solid #00F;background:#FFF} 
.divcss5-left{ float:left} 
.divcss5-right{ float:right} 
.clear{ clear:both}   //对应的样式选择器

HTMLやタグで内側に対応し、親クラスのサブクラス:

<div class="divcss5"> 
    <div class="divcss5-left">left浮动</div> 
    <div class="divcss5-right">right浮动</div> 
    <div class="clear"></div> 
</div> 

3(推奨)親divの定義オーバーフロー:.隠し

.divcss5{ width:400px;border:1px solid #F00;background:#FF0; overflow:hidden} 
.divcss5-left,.divcss5-right{width:180px;height:100px;
border:1px solid #00F;background:#FFF} 
.divcss5-left{ float:left} 
.divcss5-right{ float:right} 

それをフロートクリアするために隠された:なぜオーバーフローに参加?隠されたプロパティ親コンテンツを許可するように閉じることと等価であるので、あなたは明確なフロートを達成するために、(フロートDIVボックスの使用を含む)が対象コンテンツ内に閉じることができます:オーバーフローがためです。CSSのoverflow:DIVCSS5が推奨フロート法をクリアするために隠されました。

おすすめ

転載: blog.csdn.net/cheidou123/article/details/93255271