浮動属性関数の定義と使用法の概要

零下一度
リリース: 2017-06-09 14:40:29
オリジナル
2509 人が閲覧しました

CSS の float 属性を導入するには、まず標準ドキュメント フローを理解する必要があります。標準ドキュメント フロー: CSS を介さずに、ブロックレベルの要素は幅と高さ、およびインラインを設定できます。要素が並べて表示され、幅と高さが自動的に設定されます。 HTML ページの標準的なドキュメント フロー (デフォルト レイアウト) は上から下、左から右で、ブロック (ブロック レベルの要素) に遭遇すると改行が入ります。 float 属性の最初の使用法は、新聞でよく見られる、ターゲット コンテンツをテキストで囲むことでした。その後、フローティング レイヤー: の float 属性に値を割り当てた後、コンテンツを横に並べて配置するために使用されることが多くなりました。要素は、ドキュメント フローから切り離され、左右にフロートし、親要素の左右の境界線に固定されます (デフォルトは本文テキスト領域です)。 float プロパティの概要: left: 要素は左にフロートします。 right: 要素は右に移動します。

1. CSS の float 属性について簡単に説明します

浮動属性関数の定義と使用法の概要

はじめに: CSS の介入なしで、ブロックレベルの要素は幅と高さを設定できます。インライン要素は並べて表示されます。 HTML ページの標準的なドキュメント フロー (デフォルト レイアウト) は上から下、左から右で、ブロック (ブロック レベルの要素) に遭遇すると改行が入ります。

2. CSS float フローティング属性

浮動属性関数の定義と使用法の概要

はじめに: この記事では、要素がどの方向にフロートするかを定義する、float 属性を主に紹介します。

3. float 属性を li に設定すると、外側の ul を開くことができなくなります。

浮動属性関数の定義と使用法の概要

<で解決しましたが、最近プロジェクトでこの問題が何度か発生しました。 /p>, しかし、よく分からずネットで該当内容を調べてみたところ、 li に float を設定した後は、現在の通常のドキュメント フローから離脱するため、増やす方法がありません。外側のULの高さ。

4. Css float フローティング属性の使用方法と例を説明します。

Css float フローティング属性。ラベル オブジェクト (

ラベル ボックス、 ラベル、 タグ、およびその他の HTML タグ)、フローティングは、左側にフローティング (float:left) および右側にフローティング (float:right) と呼ばれるラベル オブジェクトです。

フロートとはどういう意味ですか?フロートとは浮くという意味で、中国語に訳すと浮かぶという意味もあります。 float に関する基本情報については、対応する CSS マニュアルの float マニュアルにアクセスしてください。

フロートの役割: CSS を通じてフロート (フローティング) を定義して、p スタイル レイヤー ブロックを左または右にフローティング (リーン) させます。

5. CSS での Clear Both の使用方法のまとめ

私たちの日常の Web ページ開発では、各ページに多くの P レイアウトがあるため、開発時に CSS float を使用すると、CSS がフロートするとが生成されるたびに、フロートをクリアする必要があります。これを実現するには、clear スタイル属性を使用する必要があります。今日は、フロートをクリアするための両方の使用方法の概要を紹介します。

6. float をクリアするための最適化ソリューションを共有する

clearfix ハックは、追加のタグを使用せずに float をクリアする方法としてよく知られています。この記事では、必要な CSS の量をさらに削減できる最適化ソリューションを紹介します。

関連する質問と回答:

1. javascript - オーバーフローの使用に関する質問: float をクリアするための非表示

2.

java - Android のフローティング ボックスの問題

【関連する推奨事項】

1.

jQuery は、ページがスクロールするときにインテリジェントなフローティング位置設定を実装します

2.

js フローティング ボックスの簡単な実装

3.

CSS でフロートをクリアするために両方を使用する方法の概要

以上が浮動属性関数の定義と使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート