web-dev-qa-db-ja.com

CSSルール「clear：both」は何をしているのですか？

次のCSSルールは何をしますか。

.clear { clear: both; }

そしてなぜ私たちはそれを使う必要があるのでしょうか？

csscss-float
279
user1708560

この質問は一般にclear: both; ORを使用する理由clear: both;は正確に何をするのか...

私はこの答えを簡潔に、そして要点を守り、なぜclear: both;が必要なのか、それが何をするのかをグラフィカルに説明します。

一般に、デザイナーは要素を左また​​は右に浮かべることで、反対側に空のスペースを作成し、他の要素が残りのスペースを占有できるようにします。

なぜ彼らは要素を浮かべるのですか？

デザイナーが2つのブロックレベルの要素を並べて必要とするとき、要素は浮遊します。たとえば、次のようなレイアウトの基本的なWebサイトをデザインしたいとします。

enter image description here

デモ画像の実例 。

デモ用コード

/*  CSS:  */

* { /* Not related to floats / clear both, used it for demo purpose only */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

header, footer {
    border: 5px solid #000;
    height: 100px;
}

aside {
    float: left;
    width: 30%;
    border: 5px solid #000;
    height: 300px;
}

section {
    float: left;
    width: 70%;
    border: 5px solid #000;
    height: 300px;
}

.clear {
    clear: both;
}
<!-- HTML -->
<header>
    Header
</header>
<aside>
    Aside (Floated Left)
</aside>
<section>
    Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
    Footer
</footer>

注：スタイルシートにdisplay: block;としてheader、footer、aside、section、およびその他のHTML5要素を追加する必要がある場合があります。ブロックレベルの要素。

説明：

基本的なレイアウトは、1ヘッダー、1サイドバー、1コンテンツエリア、1フッターです。

headerにフロートはありません。次に私のWebサイトのサイドバーに使用するasideタグが来るので、要素を左にフロートさせます。

注意：デフォルトでは、ブロックレベル要素はドキュメントの100％幅を占めますが、左右に移動すると、保持しているコンテンツに従ってサイズが変更されます。

  1. ブロックレベル要素の通常の動作
  2. ブロックレベル要素の浮動動作

あなたが気づくように、左に浮かぶdivはその右側のスペースを未使用のままにします、それはそれの後のdivが残りのスペースにシフトすることを可能にするでしょう。

  1. divは、浮動していない場合は次々にレンダリングされます
  2. divは、左右にフロートすると 左右に移動します

さて、これはブロックレベルの要素が左または右に浮かんだときの振る舞いです。では、なぜclear: both;が必要なのですか、またその理由は何ですか？

それであなたがレイアウトデモに注意するなら - あなたが忘れた場合のために、 ここ それは..

私は.clearと呼ばれるクラスを使用しています、そしてそれはclearの値でbothと呼ばれるプロパティを保持します。それでなぜそれがbothを必要とするのかを見てみましょう。

aside要素とsection要素を左にフロートさせたので、プールがあり、headerがソリッドランド、asideとsectionがプール内に浮遊し、フッターがソリッドランドとなるようなシナリオを考えます。

Floated View

だから青い水は浮遊要素の面積が何であるかわからない、彼らはプールよりも大きいか小さいことがありますので、ここでCSS初心者の90％を困らせる一般的な問題があります：なぜコンテナ要素の背景が伸びない浮いている要素を持っているとき。これは、コンテナ要素がここでPOOLであり、POOLが浮動オブジェクトの数を認識できないためです。浮遊している要素の長さや幅はいくらなのか、つまり伸縮しません。

  1. ドキュメントの通常の流れ
  2. 左に浮遊するセクション
  3. コンテナの背景色を引き伸ばすためにフローティング要素をクリアしました

（参照 [Clearfix] これを行うためのきちんとした方法のためのこの答えのセクション。説明を目的として空のdivの例を意図的に使用しています）

私は上の3つの例を提供しました、第1はコンテナが少しの浮遊オブジェクトも保持しないのでredの背景が期待通りにちょうどレンダリングする通常のドキュメントフローです。

2番目の例では、オブジェクトが左に浮遊しているとき、コンテナ要素（POOL）は浮遊要素の寸法を認識しないため、浮遊要素の高さまで伸びません。

enter image description here

clear: both;を使用した後、コンテナ要素はその浮動要素の寸法に引き伸ばされます。

enter image description here

clear: both;が使用されるもう1つの理由は、要素が残りのスペースにシフトアップするのを防ぐためです。

2つの要素を横に並べ、もう1つの要素をその下に配置したいとします。したがって、2つの要素を左にフロートさせ、他の要素をそれらの下に配置します。

  1. div左に浮遊した結果、sectionnameが残りのスペースに移動しました
  2. 浮動divがクリアされ、sectionタグが浮動divsの下に表示されるようになりました

第1の例

enter image description here

2番目の例

enter image description here

大事なことを言い忘れましたが、footerタグを宣言する前にclearクラスを使用したので、footerタグは浮動要素の後にレンダリングされます。これにより、すべての浮動要素（左/右）がその時点までクリアされます。

クリアフィックス

フロートに関連するclearfixに来る。 @ Elky で既に指定されているように、これらのfloatをクリアする方法は、空のdiv要素を使用しているため、それを行うためのきれいな方法ではありません。 div要素ではありません。そのため、ここにclearfixがあります。

あなたの親要素が終了する前にあなたのために空の要素を作成する仮想要素としてそれを考えてください。これにより、浮遊要素を保持しているラッパー要素が自動的にクリアされます。この要素はあなたのDOMには文字通り存在しませんが、仕事をします。

浮遊要素を持つラッパー要素を自己クリアするには、

.wrapper_having_floated_elements:after {  /* Imaginary class name */
  content: "";
  clear: both;
  display: table;
}

そのclassのために私が使っていた:after疑似要素に注意してください。それはそれ自身を閉じる直前にラッパー要素のための仮想要素を作成します。ドームを見ると、ドキュメントツリーにどのように表示されているかがわかります。

Clearfix

それで、あなたが見れば、それは浮遊した子divの後にレンダリングされます。ここで我々はこれにも使用しているclear: both;プロパティを持つ空のdiv要素を持つことと同等です。 display: table;とcontentがこの回答の範囲外であるのはなぜでしょうか？ここでは 疑似要素についてもっと学ぶことができます 。

これはIE8でも IE8が:after疑似 をサポートするように機能することに注意してください。

元の答え：

開発者のほとんどは、ロゴ、サイドバー、コンテンツなどを保持しているdivで、ページの左または右にコンテンツを移動します。これらのdivは左または右に移動し、残りのスペースは使用されません。残りのスペースにも浮かぶので、clear: both;が使われるのを防ぐために、それは左または右に浮かぶすべての要素をクリアします。

デモンストレーション：

------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------

他のdivをdiv1の下にレンダリングしたい場合は、clear: both;を使用するので、左または右のすべての浮動小数点数を確実にクリアできます。

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------
668
Mr. Alien

clear プロパティは、要素の左右または左右が隣接していないことを示します同じブロック書式設定コンテキスト内の以前の浮動要素。クリアされた要素は対応する浮遊要素の下にプッシュされます。例：

clear: none;要素は浮遊要素に隣接したままです

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-none {
  clear: none;
  background: #FFF;
}
<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>

clear: left;要素が左浮遊要素の下に押されました

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.clear-left {
  clear: left;
  background: #FFF;
}
<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>

clear: right;要素が右浮遊要素の下にプッシュされました

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-right {
  clear: right;
  background: #FFF;
}
<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>

clear: both;要素がすべての浮動要素の下にプッシュされました

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-both {
  clear: both;
  background: #FFF;
}
<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>

clearは、現在のブロックフォーマットコンテキスト外の浮動小数点数には影響しません。

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.inline-block {
  display: inline-block;
  background: #BDF;
}
.inline-block .float-left {
  height: 60px;
}
.clear-both {
  clear: both;
  background: #FFF;
}
<div class="float-left">float: left;</div>
<div class="inline-block">
  <div>display: inline-block;</div>
  <div class="float-left">float: left;</div>
  <div class="clear-both">clear: both;</div>
</div>
38
Salman A

CSSのフロートとクリア

サンプルフィドル

divclassを使用してsampleからclear:bothプロパティを削除し、浮動divsに続く方法を確認するだけです。

23
Priyank Patel

Alien氏の答えは完璧ですが、とにかく私は<div class="clear"></div>の使用をお勧めしません。なぜならそれはあなたのマークアップを汚すだけのハックだからです。これは、構造や意味が悪いという意味では意味がありません。空のdivname__は無駄です。ブラウザによっては、このdivによってさらに高さが増すため、height: 0;を追加する必要があります。しかし、浮遊している要素の周囲に背景や境界線を追加すると、本当の問題が発生します。 Webの設計が悪いため 、折りたたまれることがあります。私は clearfix CSSルールを持つコンテナに浮遊要素をラップすることをお勧めします。これもハックですが、美しく、より柔軟に使用でき、人間やSEOのロボットにとって読みやすいものです。

12
elky

ある要素を他の要素の一番下に配置する場合は、CSSでこのコードを使用します。フロート用です。

コンテンツをフロートさせる場合は、左右にフロートさせることができます。一般的なレイアウトでは、左ナビゲーション、コンテンツdiv、およびフッターがあります。

フッターがこれらの両方のフロートの下に留まるようにするには（左右にフロートしている場合）、フッターをclear: bothとして配置します。

このようにそれは両方のフロートの下にとどまるでしょう。

（あなたが左に片付けているだけであれば、あなたは本当にclear: left;だけをする必要があります。）

このチュートリアルを見てください。

2
Saeed