CSS 学習におけるフローティングの詳細な紹介
CSS学習ノート05の表示属性の記事から、divはブロック要素であり、次のようにdivの幅が小さくても単独で1行を占めることが分かります
表示属性のインラインを適用する この属性を使用すると、div が div と行を共有できます。この効果を実現する他の方法はありますか? 答えは「はい」です。以下で紹介するCSSの機能「フローティング」とは文字通り、浮いて動くという意味です。読み続ければ、すぐに答えがわかります。
要素のフローティングとは、フローティング属性が設定された要素が標準ドキュメント フローの制御から離脱し、標準フローの上にフローティングされることを意味します。要素をフローティングした後は、標準フローから外れますが、標準フローのレイアウトには影響します。
CSS では、float は float 属性によって定義されます。その基本構文形式は次のとおりです: selector {float: 属性値;}、デフォルト値は none (浮動小数点数ではない)、left は左を表すために使用されます。フローティング、それは理解できます フローティングした後に左に配置するということは、右は右にフローティングすることを意味し、当然右に配置されます。
それでは、float を div2 に設定して、どのような効果が現れるかを見てみましょう
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>浮动</title> 6 <style type="text/css"> 7 .div1 {background-color: red; height: 50px; width: 400px;} 8 .div2 {background-color: blue; height: 100px; width: 100px; float: left;} 9 .div3 {background-color: gray; height: 150px; width: 400px;}10 .div4 {background-color: green; height: 30px; width: 600px;}11 </style>12 </head>13 <body>14 <div class="div1">div1</div>15 <div class="div2">div2</div>16 <div class="div3">这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3</div>17 <div class="div4">div4</div>18 </body>19 </html>
这时候div2的位置并没有变化，而div3向上移动了，与div2共用一行，相当于div2不占用页面的空间了，不过影响了div3中的文字布局。从这里也可以清楚的看出，是浮动的对象div2先漂浮起来，然后后面的对象div3会向它原来的位置动起来，这也解答了刚开始提出的问题。
浮动是将块元素独占一行的行为取消，将这个块从原来的文档流模式中，可以理解为它飘起来了，它原来的地方就空出来了，它的内容分离出来，这样它后面的对象就当它不存在了。
接下来给div3也设置一下浮动，会有什么意想不到的结果出现吗？
这时，由于div2与div3同时设置了浮动，所以都脱离了标准流，因此div4向上移动与div1组成了一个新的标准流，而浮动的元素是“浮”在标准流的元素之上的，所以div4被div2，div3挡住了一部分。
从上面的现象可以看出，给div3设置浮动之后，div3是紧接着跟在div2后面的，但是div2也是设置了浮动的，可是div2并没有跟在div1后面，这里可以得出一个结论：
浮动的元素A排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐（也就是紧挨着上一个元素的后面），如果一行放不下，A元素则会被挤到下一行；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
假如把div4也设置成左浮动，效果如下
我们来一起分析一下，首先看div4，它的上一个元素div3设置了左浮动，所以div4的顶部与div3的顶部对齐，接着看div3，div3的上一个元素div2也设置了左浮动，所以div3的顶部与div2的顶部对其，现在看div2，div2的上一个元素是div1，但是div1并没有设置浮动属性，属于标准流，所以div2的顶部与div1的底部对齐。
或许有人会想如果要让div4独占一行，该怎么办？这就需要用到CSS的清除浮动，清除浮动的关键字是clear，它有如下几个值
再来看div2设置左浮动的现象
因为div3的上一个元素div2设置了左浮动，所以div3占据了元素div2的空间，因为div3的宽高比div2的宽高都大，所以div3被div2挡住了一部分，我们知道标准流中的元素都是没有设置浮动属性的，所以需要清除掉div2元素浮动给div3造成的影响，由于div2是左浮动，因此为div3清除左边的浮动
现象与原来没有设置浮动一样，好，现在div2与div3同时设置左浮动，我想应该可以比较容易的知道如何让div4独占一行了。
清除浮动其他属性值可以自行类推并测试出来。有了上面的基础，我们就可以做出以下比较常见的网页布局。
1 <!DOCTYPE html> 2
<html lang="en"> 3 <head> 4
<meta charset="UTF-8"> 5
<title>常见布局</title> 6
<style type="text/css"> 7
.head {background-color: red; height: 50px; width: 500px;} 8
.sidebar {background-color: blue; height: 200px; width: 100px; float: left;} 9
.main {background-color: gray; height: 200px; width: 400px; float: left;}10
.foot {background-color: green; height: 30px; width: 500px; clear: left;}11
</style>12 </head>13 <body>14 <div class="head">head</div>15
<div class="sidebar">sidebar</div>16
<div class="main">main</div>17
<div class="foot">foot</div>18 </body>19 </html>以上がCSS 学習におけるフローティングの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7557
15
1384
52
83
11
28
96
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
