CSSフロート：説明、プロパティ

フロート-言語の基本的な機能の一つ CSS（カスケーディングスタイルシートしている -カスケードのフォーマット）。 この言語は1996年から存在していると、まだ開発を続けています。 現時点では、開発者は、CSSの3番目のバージョンを使用していました。 CSSのプログラミング言語では、あなたではJavaScriptを使用していない場合でも、ユーザーのために古くなったり不快に表示されません美しいと楽しいサイトを作成することが可能です。 許可証の3番目のバージョンの近代的な可能性。

また、開発者はまず、このようなフレキシボックスまたはサイト上のスペースの要素を変更する立場として、より便利な書式設定オプション、が、最初のものを使用することができます。 長所と短所の特性をフロートを理解するために開始します。

CSSフロート - なぜそれが必要とされていますか？

フロート - 位置決め要素のプロパティを。 毎日、それは絵を見て、新聞や雑誌のページで見ることができ、非常にきれいであるテキストは、それらをラップアラウンド。 и CSS при использовании функции Float должно произойти то же самое. フロート機能を使って、HTMLとCSSのコードの世界で同じように起こるはず。 しかし、それは画像編集は、常にこの関数の主な目的ではないことを覚えておく価値があります。 2つ、3つ、4つの列にあるサイトの要素の人気の場所を作成するために使用することができます。 実際には、フロートCSSプロパティは、事実上任意のHTML要素に使用されています。 サイトの任意のデザインを作成するために、そしてプロパティをフロート機能を使用してレイアウト要素を編集して、の基本を知ることは難しいことではないだろう。

特別なDTPプログラムは時々画像を無視することができ、それらの上に行くことに。 十分に同様のことが起こると（プロパティフロート間違って使用した場合）、画像上のテキストのみの光ではなく、登るとウェブデザインは、表示されている横にまたはそれの下で、常にではないが、あなたは、開発者が必要な場所。

プロパティのCSSフロートの説明

実際には、フロートプロパティを使用する機能は、任意のWebデザイナーのための穴で非常に良いエースです。 しかし、残念ながら、これはどのように動作するかの理解の欠如が衝突し、この種のサイト悲しみの他の要素につながる可能性があります。 以前にもこのような状況があるため、ブラウザのバグで発生します。 正しくフロートプロパティを使用する方法の秘密が開かれ、そしてそれに問題は大きくなることはないべきではありません。

私たちは、プロパティは、4つの値を持っているフロート：

• フロート：継承します。
• フロート：右;
• フロート：左;
• フロート：なし。

英語を知っている人のために、パラメータの値は、プロパティが明確でなければならないフロート。 しかし、知らない人のために、あなたは少し説明をもたらすことができます。 パラメータ：左; これは、親要素の最も極端な左隅に素子本体を移動します。 同じことが（唯一の他の方法）を発生したときbcgjkmpjdfybb パラメータ：右; 。 値：継承します。 親と同様の構成を前提とする要素を命じます。 彼らは親のhtml-のコード内に直接配置されているように、このような要素は、まだ子供と呼ばれます。 プロパティ：なし。 これは、要素は、コードのすべての部分にデフォルトで設定されている文書の通常の流れを妨害しないようにすることができます。

どのように仕事をフロートするには？

フロートCSSプロパティは、非常に単純に動作します。 上記に記載されているすべてのことは、あまり問題なく行うことができます。 その後、すべてが同じように簡単になります。 しかし、私は、フロートの特性を研究し続ける前に、理論的に少し一見の価値。 すべてのWebサイトは、ブロックの要素です。 Ctrlキー+ Shiftキー+ J.テキスト、タイトル、画像、リンク、およびサイトの他のすべてのコンポーネントのブロックを表示されます、ちょうど異なるサイズを押して、Google Chromeでコンソールを開いて、これを見ることは容易です。 最初は、これらすべてのブロックが互いに以下の通りです。 以下の例に示すように、コード列が次々に行く、そしてので、厳密に一方が他方の後ろのように見えます。

これは、通常の流れ（通常の流れ）と呼ばれています。 すべてのそのようなブロックは、垂直に（要素と交差することなく本体）お互いに入るとき。 最初は、このようにあるWebページのすべての内容。 使用している場合しかし、例えば、左CSSフロートのプロパティ言語要素は、ページ上のその自然な位置を離れ、左に移動します。 この動作は、通常のコースに残っているこれらの要素との必然的な衝突につながります。

換言すれば、要素の代わりに垂直に配置されている、今、互いに隣接しています。 それは内部に2人の子供を収容することができるように親要素が十分なスペースをされた場合、衝突は発生しませんが、ない場合は、別の1つのオブジェクトの賦課は避けられません。 フロートCSSのプロパティを理解するために覚えておくことが非常に重要です。

問題を解決するためのクリア機能

クリア - 私たちは、心のそれぞれが特徴フロート。 彼らは一緒に- 水をこぼさないでください。 これらの機能の両方がお互いを補完し、開発者を幸せにします。 前述したように、隣接するセルは通常のコースの外に出るともフロートプロパティを使用したために要素（例えば、CSSフロートトップ）として「フロート」に始まります。 その結果、代わりに浮動要素のうちの2つを取得し、ではない彼らは、開発者を手配することを目的の場所に。 その瞬間から、ちょうどすべての問題を始めています。

クリア機能には5つの値があります。

• ：左;
• ：右;
• ：両方;
• ：継承;
• 何もありません。

それがクリア機能を使用するのが最適であるとき類推すると、我々は理解することができます。 私たちは、コードフロート内の行を記述した場合：右; （CSSコードを意味する）、機能が明確でなければならない：右;. 岩と同じ性質フロート：左; それがクリア補完する：左; 。 クリアコード書くとき：両方を、 それが適用される要素は、この機能は、フロート機能を適用した要素を下回るであろうことが判明しました。 継承は、親要素からの設定がかかりますが、どれも、サイトの構造を変更しません。 и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. あなたはどのようにフロートとクリアの機能を理解していれば、あなたはそのようなもので、あなたのウェブサイトを一意になる、ユニークで珍しいHTMLやCSSフロート・コードを書くことができます。

列を作成するためにフロートを使用しました

サイト（またはウェブページの中央にCSSフロートコンテンツの場所）に列を作成するときに特に便利な機能をフロート。 これは、このコードは、最も実用的で便利であるので、あなたは、2つの列からなる通常のサイトテンプレートを作成するためのいくつかのオプションを検討すべきです。 例えば、右、ヘッダーとフッターの左のナビゲーションバー（ナビゲーションバー）上のコンテンツを標準のウェブサイトを取ります。 コードは次のようになります。

今、私たちはここに書かれているかを理解する必要があります。 HTMLコードの主要部分は、容器（コンテナ）と呼ばれている親要素。 それはあなたが異なる方向に散乱させるためにフロート機能を適用された要素を、防ぐことができます。 それがなかった場合には、これらの要素は、ブラウザの境界に浮き上がってきました。

次に、コード内と#content #navigationを行きます。 これらの要素は、フロート機能を使用しています。 左と右に送ら#contentは#navigationです。 2つの列を持つサイトを作成する必要があります。 オブジェクトが重ならないように、幅を指定してください。 あなたは、幅と割合を指定することができます。 だから、もっと快適ピクセルよりも。 例えば、45％#navigationため#content、残りの10％〜45％が性マージンを得ました。

#footerにあるクリアのプロパティは、フッター#navigationと#contentに従いますが、彼は同じ場所にそれを残していません。 何が起こることができますか？ あなたはクリアプロパティを指定しない場合は？ このコード#footerでは、単純に上がると#navigation下になります。 これは、一つの要素以上に対応するために十分なスペースを#navigation事実に起こります。 この例示的な例では、クリアの特性がフロートと互いに補完方法をはっきりと見えます。

コードを書くときに発生する可能性があるトラブル

上記の例は単純です。 しかし、それらの問題を引き起こす可能性があります。 一般的に、実際には、予期せぬトラブルの多くは、機能をフロートするために起こることができます。 どんなに奇妙な、しかし問題は、通常はCSSで発生しませんし、HTMLコード。 HTMLコード内のフロート機能を有する要素が直接最終作業に影響を与える場所。 位置決め要素は、最初のコードの機能をフロート - 困難の様々な種類を避けるためには、単純なルールに固執するのが最善です。 ほとんど常にそれが動作し、彼らの予期しない動作を最小限にすること。

要素の衝突

親要素は、それらすべてに対応することができない複数の子が含まれている場合、衝突が発生し、彼らは互いに重なり合います。 それも、項目が表示され、サイトから消えないことが起こります。 これはバグのブラウザではなく、それが期待されるとフロート機能を持つ要素を適切に動作されます。

これらの要素は、通常の過程で最初にあり、その後、それが壊れたフロートプロパティブラウザでサイトからそれらを削除することができるという事実によります。 解決策は単純明快であるので、しかし、絶望しないでください - CEARプロパティを使用します。 この問題のうちの方法のすべてが、クリアの使用が最も効果的であることが可能です。

しかし、Webページの要素の衝突の問題は別の方法で解決することができます。 少なくとも2つの方法があります。

• 機能の使用を置き、
• アプリケーションフレキシボックス。

ポジション機能は、多くの場合、CSSフロートに良い代替手段です。 アプリケーションの場合位置におけるウェブページの中央に画像を配置するのが最善です。 絶対と：を：正しく適用される値場合に比較して、要素が所定の位置に落下し、互いに重複しないであろう。

位置解析とフロート機能コード

и CSS Float заменить на Position. これは、HTMLでの方法と位置に置き換えCSSフロートにより対処する必要があります。 実際、それは非常に簡単です。 のは、要素#containerと#divがあるとしましょう。

#container {

幅：40％;

フロート：左;

マージン：10pxの;

}

#div {

幅：40％;

フロート：右;

マージン：10pxの;

}

#footer {

クリア：両方;

}

この例では、第二の容器（CSS本部）での機能の使用は、フロートは、2つの列の標準サイトを作成するのに役立ちます。 クリア機能を決して忘れません。 それがなければだけ互いの上に要素をオーバーレイします。

それでは、どのようにPostionを使用するようにCSSとフロートコードを変更できますか？ 非常に単純：

#container {

幅：40％;

位置：相対;

マージン：10pxの;

}

#div {

幅：40％;

位置：相対;

マージン：10pxの;

}

この場合#containerの#divおよび親要素内の現像剤の必要な位置をとります。 主なもの？ #divを入れて、そのサイズに対応します1つの親要素を、#container。

フレキシボックス - この機能は、CSSフロートを置き換えるのだろうか？

フレキシボックス - 現時点でウェブサイトを作成するための最も高度な方法なので、この機能は、ブラウザの古いバージョンでサポートされていません。 この事実は、ブラウザの旧バージョンとのユーザーのために、割引されないが、サイトの正しいバージョンを確認することができません。

フレキシボックスは、別のモジュールとして、プロパティではありません。 したがって、フレキシボックスは彼と一緒に仕事の性質、数をサポートしています。 また、インライン3つのパラメータを有する表示機能は、フレキシボックス内のブロックとインラインブロックは、唯一のフレックスフローがあります。

どのようにフレキシボックスはいますか？

この技術は、簡単に水平方向と垂直方向の要素を揃えるために、開発者を支援します。 フレキシボックスはまた、方向と表示要素の順序を変更することができます。 メイン軸とクロス軸、全体のフレキシボックスが内蔵され、その周り：この技術では、2つの軸があります。 また、効果のフロートとクリア機能を削除します。 彼は、残念ながら、細胞内で複製することはできない、彼の財産にユニークを使用するコードで自分のシステムを構築し、そうなフロートや位置などの他の特性、。 前述したように、フレキシボックスが唯一のブラウザの新しいバージョンで動作し、ので、それは、非常に便利になります。

終了位置、フレキシボックスフロートにして同じことを行うことを覚えておく価値がある - あなたのサイトの珍しい、オリジナルのデザインを作成します。 記事で説明の各バージョンには、自分のやり方でそれをしないと、それゆえ、長所と短所の両方があります。 また、どこか完璧なフロート機能は、（例えば、シンプルな構造を持つサイトで）、しかしどこかに、より良いポジションやフレキシボックスを使用することが起こります。

ダブルマージンバグ

しかし、時々、残念ながら、すべての開発者の問題はバグで、いくつかのブラウザ固有の形式で、記述されたコードからではなく発生します。 たとえば、Internet Explorerで、ダブルマージンバグと呼ばれる不具合は、そこにあります。 彼は、ブラウザの国境のサイトの要素の変位が得られ、2に余白パラメータを乗算します。 これを回避するためには、パラメータの利益率を示すのに十分です。 ときにyとプロパティマージンフロートポイントの値が通常このバグが発生します。

#div {

フロート：左;

margin-left：10pxの;

}

このコードは、Internet Explorer 20ピクセル左に要素をシフトします。 次のようにコードを変更することができます：

#div {

フロート：左;

余白左：10％;

}

またはそう

#div {

フロート：左;

マージン右：10pxの;

}

これらのオプションのどちらも、変位素子の問題を解決します。

バグブラウザと正しく表示されないサイト

バグを発生することがあります唯一のブラウザではありません - Internet Explorerがいることを覚えておく価値があります。 GoogleのChromeとMozillaの古いバージョンのも間違って近代的なウェブサイトのいくつかの要素を表示します。 これらの修正プログラムのそれぞれについて、あなたは解決策を見つけることができます。 一般的に、我々は、フロートの使用は、元と魅力ウェブサイトのデザインを作成することに注意してください。 このプロパティの基本と原則を理解することは、間違いを避ける助け、すべての開発者のための生活が容易になります。