Css3-8の基礎 Cssフローティング（位置決め、フローティング位置決め）_html/css_WEB-ITnose

1. CSS 配置の概要

配置の概要

- 配置: 要素ボックスを相対的に表示する場所を定義します。通常の位置、または親要素、別の要素、またはブラウザ ウィンドウ自体に対する相対位置

- 通常のフロー位置

- フローティング位置

- 相対位置

- 絶対配置

通常のフロー配置

- ページ内のブロックレベルの要素ボックスが上から下に順番に配置されます

- 各ブロックレベルの要素は新しい行に表示されます (

要素、

要素など)

- 要素ボックス間の垂直距離は、垂直方向の外側のボックスによって決まります。ボックスの端 計算された距離

- インライン要素は左から右へ水平方向に一列に配置されます

- 新しい行で開始する必要はありません

- 水平方向パディング、ボーダー、マージンを使用して間隔を調整できます

2. CSS フローティング位置

フローティング概要

- フローティング配置とは、

- 要素を通常のフローから除外します。つまり、要素は標準のドキュメント フローから切り離されます。

- 要素はページ上のスペースを占有しない

- フローティング要素を包含ボックスの左側または右側に配置します

- フローティング要素は依然として包含ボックス内にあります

-フローティング ボックスは、外側の端が収容ボックスまたは別のフローティング ボックスの境界線に触れるまで、左右に移動できます

- 特別な位置決め効果を実現するためによく使用されます

フローティング配置

- ボックス 1 が右にフローティングされている場合、ボックス 1 はドキュメント フローから切り離され、右端まで右に移動します。 🎜>

- ボックス 1 が左に移動すると、ドキュメント フローから抜け出し、その左端が含まれているボックスの左端に触れるまで左に移動します

- ボックス 1 はドキュメント フローに存在しないため、スペースを占有しません。実際にはボックス 2 を覆い、ボックス 2 がビューから消えます

- 3 つすべてを移動するとボックスを左に移動し、ボックス 1 がそれ​​を含むボックスに当たるまで左にフロートし、他の 2 つのボックスは前のフローティング ボックスに当たるまで左にフロートします。3 つのボックスが同じ行に表示されます

- 含まれているボックスが狭すぎる場合、他のフローティング ブロックは十分なスペースができるまで自動的に下に移動します (左の画像)

- フローティング要素の高さが異なる場合、それらのブロックは他の浮動要素が下に移動するときに他の浮動要素によって「スタック」される可能性があります (右の画像)

- 浮動要素の外側のエッジは、その親の内側のエッジを超えません

- フロート要素は互いに重なりません

- フロート要素は上下にフロートしません

float 属性

- 場合ボックスが含まれるボックスの左側または右側にフロートするように設定する必要があります。これを実現するには、float 属性を使用できます。

- float プロパティは、要素がどの方向にフロートするかを定義します

- CSS では、任意の要素を float にできます

- float: none/left/right;

clear 属性

- フローティングの影響をクリアするためにクリア属性が使用されます

- クリア: none/left/right/both;

- 要素のどちら側にフローティング要素を含めることが許可されないかを定義します

'

float と overflow

- float が包含ボックス内の要素に適用された後の、包含ボックスが変更されます

- 包含ボックスにオーバーフロー属性を設定します

概要: この章Css（位置決め、フローティング位置決め）を中心に紹介します。

関連ラベル：

Css3之基础-8 Css 浮动（定位，浮动定位）

ソース：php.cn

前の記事：ダブルヘッダーが修正され、コンテンツがscrolls_html/css_WEB-ITnose 次の記事：Css3 コンテンツは左、右、上、下の中央に配置されます_html/css_WEB-ITnose

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• 市場の課題の中、イーサリアム（ETH）投資家はムペッペ（MPEPE）に注目
  2024-09-20 00:42:11
• ソラナ (SOL) クジラは長期投資戦略の重要な部分としてムペペ (MPEPE) に注目
  2024-09-20 00:39:43
• VeChainのVeBetterDAOは、仮想通貨と持続可能性を融合する現実世界の行動に焦点を当てています
  2024-09-20 00:33:10
• DTX取引所（DTX）、ドージコイン（DOGE）のクジラジャンプで1000％上昇へ
  2024-09-20 00:32:11
• ドージコイン（DOGE）の取引が柴犬（SHIB）を上回り、ミームコインへの関心が再燃していることを示唆
  2024-09-20 00:31:11
• 今日の暗号通貨価格: ビットコイン価格は66,000ドルのマーク、イーサリアム、ソラナ、XRPに注目
  2024-09-20 00:28:12
• カナダ王立造幣局、カナダ空軍創立100周年を記念した流通コインを発表
  2024-09-20 00:22:10
• 1世紀前の宝物がついにコペンハーゲンで明るみに出る
  2024-09-20 00:20:11
• Pepe Unchained (PEPU): レイヤー 2 機能を備えた新しいミーム暗号
  2024-09-20 00:18:13
• 今後の強気相場で大きくなる可能性のあるミームコイントップ3
  2024-09-20 00:16:17

最新の問題

モバイル上のカスタム Bootstrap 5 カルーセル (複数の項目、ただし 1 行ではない) モバイル デバイスでカルーセル レイアウトをカスタマイズしようとすると問題が発生します。モバイル上でカルーセルの項目を 1 つだけではなくすべて表示したいのですが、いくつかの CS...

から 2023-09-05 11:53:56

0

1

296

新しいヘッダー: フッターが常にページの下部にあることを確認します。 フッターをページの下部に配置し、ページの下部までスクロールするまで表示されないようにするプロジェクトに取り組んでいます。 CSS で「position:fixed」を使用しようとし...

から 2023-08-27 23:13:19

0

1

216

html - 急求，能否用flex或者高端点的CSS来布局这个图呢？不想用浮动或定位了 就是一个正方形里面，有五个大小相同的小圆圈，一个大圆圈，这样排版。自己用flex写了好久也没写出来，但是不想用浮动或者定位，有木有什么高端一点的CSS高端写法呢

から 2017-04-17 14:41:40

0

6

401

css - 如何把一个视图放在左浮动定位的视图的上面？ 我想把一个红色的视图放在左浮动视图的上面，但是看不见了这个红色视图，下面是我的代码，多谢指导。 {代码...}

から 2017-04-17 14:40:10

0

2

426

javascript - 图片加载执行顺序以及控制方法 在刮奖效果中，我用Canvas在同一位置插入了两层图片 {代码...} 为了让浮层优先显示和加载，所以我将浮层定义在了前边同时，为了让浮层位于底层之上，我设置了Z-INDEX属性但...

から 2017-04-11 10:03:41

0

2

491

関連トピック

詳細>

• mysqlページングメソッド
• CSSでのfloatの使用法
• ソウルとはどのようなソフトウェアですか?
• vscode を記述するために一般的にどの言語が使用されますか?
• 本物のリップルコインの購入方法
• 携帯電話をフォーマットするとはどういう意味ですか?
• メッセージボックスの使い方の概要
• シェルスクリプトの実行方法にはどのようなものがありますか?