CSSにおけるいくつかのクリアフローティング法による高度陥没の解決

24330 ワード

css

問題の原因:サブエレメントにフローティングを設定したが、親エレメントに高さを設定しなかった場合、高さ陥没の問題が発生します.
解決策かいけつほうしき:フローティングのクリアふぉーるのじょきょ
フローティングをクリアする方法:

1.

<style type="text/css"> 
*{
   margin: 0;
   padding: 0;
}
.box1{
   background-color: #0f2;
   width: 100%;
   margin-bottom: 20px;
   /*      */
   height: 210px;
}
.left{
   height: 120px;
   width: 200px;
   background-color: #aaa;
   float: left;
}
.right{
   height: 210px;
   width: 200px;
   background-color: #763;
   float: left;
}

.box2{
   width: 100%;
   height: 150px;
   background-color: #15d;
}
style> 
<body>
   <div class='box1'>
      <div class='left'>leftdiv>
      <div class='right'>rightdiv>
   div>

   <div class='box2'>testdiv>
body>

  2.        div  clear：both

説明:この場合、高度に固定されたレイアウトの場合に使用するのが望ましいが、一般的には使用を推奨しない

<style type="text/css"> 
*{
   margin: 0;
   padding: 0;
}
.box1{
   background-color: #0f2;
   width: 100%;
   margin-bottom: 20px;
   /*      1*/
   /*height: 210px;*/
}
.left{
   height: 120px;
   width: 200px;
   background-color: #aaa;
   float: left;
}
.right{
   height: 210px;
   width: 200px;
   background-color: #763;
   float: left;
}

.box2{
   width: 100%;
   height: 150px;
   background-color: #15d;
}
/*      1*/
.clear{
   clear: both;
}
style> 
<body>
   <div class='box1'>
      <div class='left'>leftdiv>
      <div class='right'>rightdiv>
      <div class='clear'>div>
   div>

   <div class='box2'>testdiv>
body>

説明:この方式のコードは比較的に少なくて、比較的に簡単ですが、もしページのフローティングのレイアウトが多いならば、多くの空のdivを増加して、ラベルを浪費して、人を不快にさせます

   ：  div    ：after zoom

<style type="text/css"> 
*{
   margin: 0;
   padding: 0;
}
.box1{
   background-color: #0f2;
   width: 100%;
   margin-bottom: 20px;
}
.left{
   height: 120px;
   width: 200px;
   background-color: #aaa;
   float: left;
}
.right{
   height: 210px;
   width: 200px;
   background-color: #763;
   float: left;
}

.box2{
   width: 100%;
   height: 150px;
   background-color: #15d;
}
/*      */
.clear:after{
   display: block;
   clear: both;
   content: "";
   height: 0;
   visibility: hidden;
}
.clear{
   zoom:1;
}
style> 
<body>
   <div class='box1 clear'>
      <div class='left'>leftdiv>
      <div class='right'>rightdiv>
   div>

   <div class='box2'>testdiv>
body>

説明:この方法はブラウザのサポートが良いので、大きな問題が発生しにくいです.現在のいくつかの大手サイト、例えば(テンセント、網易、新浪)はこの方法を使用しています.

   ：      overflow：hidden;

<style type="text/css"> 
*{
   margin: 0;
   padding: 0;
}
.box1{
   background-color: #0f2;
   width: 100%;
   margin-bottom: 20px;
   /*      */
   overflow: hidden;
}
.left{
   height: 120px;
   width: 200px;
   background-color: #aaa;
   float: left;
}
.right{
   height: 210px;
   width: 200px;
   background-color: #763;
   float: left;
}

.box2{
   width: 100%;
   height: 150px;
   background-color: #15d;
}

style> 
<body>
   <div class='box1'>
      <div class='left'>leftdiv>
      <div class='right'>rightdiv>
   div>

   <div class='box2'>testdiv>
body>

説明:positionと組み合わせて使用することはできません.超えたサイズは非表示になりますから.

   ：  div  overflow：auto

<style type="text/css"> 
*{
   margin: 0;
   padding: 0;
}
.box1{
   background-color: #0f2;
   width: 100%;
   margin-bottom: 20px;
   /*      */
   overflow: auto;
}
.left{
   height: 120px;
   width: 200px;
   background-color: #aaa;
   float: left;
}
.right{
   height: 210px;
   width: 200px;
   background-color: #763;
   float: left;
}

.box2{
   width: 100%;
   height: 150px;
   background-color: #15d;
}

style> 
<body>
   <div class='box1'>
      <div class='left'>leftdiv>
      <div class='right'>rightdiv>
   div>

   <div class='box2'>testdiv>
body>

説明:内部の幅が親divを超えると、スクロールバーが表示されますので、スクロールバーが表示される必要がある場合や、コードがスクロールバーが表示されないことを保証する必要がある場合は使用します.

bShare共有、複数の共有ボタン

ASP.NET C#日時年月日時分秒形式及び変換