CSSフローティングの方法とは何ですか？-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSフローティングの方法とは何ですか？

青灯夜游

Apr 30, 2021 pm 01:58 PM

CSS では、float 属性を使用して、float 要素に「float:left」または「float:right」スタイルを設定できます。要素をフローティングにすると、要素が元のブロックレベル要素かインライン要素かに関係なく、並べて配置できるようになり、幅と高さを設定できるようになります。

CSSフローティングの方法とは何ですか？

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

フローティング float の本来の目的は、テキストの折り返し効果を実現することです。

フローティング構文: float:left/right;

float:left または float: right、またはその両方を使用します。生成されるフロート。

フローティングの性質

フローティングは、CSS のレイアウトに最もよく使用される属性です。

これで 2 つの div ができ、それぞれ幅と高さを設定します。これらの効果は次のとおりであることがわかっています。

現時点では、これら 2 つの div に float: left;## などの float 属性を追加すると、 #、効果は次のとおりです。

#これにより、フローティング効果が得られます。このとき、2 つの要素は並んでおり、両方の要素で幅と高さを設定できます (これは、前段落の標準的なフローでは実現できません)。

フローティングを上手に学びたいなら、3 つの性質を知る必要があります。次にそれについて話しましょう。

プロパティ 1: フローティング要素は標準外です

標準外とは、標準フロー外であることを意味します。いくつかの例を見てみましょう。

証拠 1:

上の図では、デフォルトで 2 つの div タグが上下に配置されています。 float 属性により、上の図の最初の

タグは浮いているように見えるため、このタグは別のレベルに配置されます。 2 番目の

も、独自のレベルの標準フローに従って配置されます。 証拠2:

上図において、spanタグは標準フローでは幅と高さを設定できません(インライン要素のため) ）。ただし、float に設定すると、ブロックレベルの要素に変換しなくても幅と高さを設定できます。

したがって、これは 1 つのことを証明できます:

要素をフローティングにすると、横に並べることができ、幅と高さを設定できるようになります。それが div であっても、span であっても構いません。 すべてのタグは、フローティング後はインラインレベルとブロックレベルを区別しなくなります。

プロパティ 2: 浮動要素は互いに近接しています

理解するために例を見てみましょう。

3 つすべての div に

float:left; 属性を設定した後、幅と高さを設定します。ブラウザウィンドウのサイズを変更すると、div のスナップ効果が確認できます。

上の図は、3 番に十分なスペースがある場合、 2位に近いでしょう。スペースが足りない場合は兄貴1号に寄りかかります。

兄弟 1 号にもたれるのに十分なスペースがない場合、3 号は一人で左側の壁にくっつきます。

ただし、3 号が単独で壁に張り付いている場合は、次のことに注意してください。

上の図は、3 号が左側の壁に張り付いている場合を示しています。、彼は行きません 1 中は混雑しています。

同様に、float にも

right という属性値があり、これは left の属性値と対称です。

プロパティ 3: フローティング要素には「単語の周囲」効果がある

画像を見れば理解できるでしょう。 div をフロートにし、p をフロートにしないようにします。

上の図では、

div は p をブロックしますが、p 内のテキスト はブロックせず、「単語の周囲」効果を形成していることがわかりました。。

概要:

標準ストリーム内のテキストは、フローティングボックスによって隠されません。（言葉は水のようなもの）

浮遊については、一点だけ強調しておかなければなりませんが、混乱を避けるために、初期段階では次の原則に従う必要があります:

単独で浮遊するものではありません。みんなで浮いて、浮いて、みんなで浮いて。

プロパティ 4: 縮小

Shrink: 幅が設定されていない場合、浮動要素はコンテンツの幅に自動的に縮小します (これはインライン要素と非常に似ています)。

例:

上の図では、div 自体がブロックレベルの要素です。幅が設定されていない場合、それは全体を占めます。行のみ。ただし、div をフローティングに設定すると、縮小されます。

フローティング補足（Webサイト作成時注意）

上図のようにpara1とpara2をfloatに設定します。これらはdivの子です。このとき、para1 para2の幅はdivの幅よりも小さくなります。効果は上の写真に示されています。ただし、para1 para2 の幅が div の幅より大きく設定されている場合、para2 が次のようになります:

(学習ビデオの共有: css ビデオ)チュートリアル )

ジョブの割り当て

次の効果を必要とするジョブを割り当てます:

上記の効果を実現するには、コードは次のとおりです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
width: 970px;
height: 103px;
/*居中。这个语句的意思是：居中：*/
margin: 0 auto;
}
.header .logo{
float: left;
width: 277px;
height: 103px;
background-color: red;
}
.header .language{
float: right;
width: 137px;
height: 49px;
background-color: green;
margin-bottom: 8px;
}
.header .nav{
float: right;
width: 679px;
height: 46px;
background-color: green;
}

.content{
width: 970px;
height: 435px;
/*居中，这个语句今天没讲，你照抄，就是居中：*/
margin: 0 auto;
margin-top: 10px;
}
.content .banner{
float: left;
width: 310px;
height: 435px;
background-color: gold;
margin-right: 10px;
}
.content .rightPart{
float: left;
width: 650px;
height: 435px;
}
.content .rightPart .main{
width: 650px;
height: 400px;
margin-bottom: 10px;
}
.content .rightPart .links{
width: 650px;
height: 25px;
background-color: blue;
}
.content .rightPart .main .news{
float: left;
width: 450px;
height: 400px;
}
.content .rightPart .main .hotpic{
float: left;
width: 190px;
height: 400px;
background-color: purple;
margin-left: 10px;
}
.content .rightPart .main .news .news1{
width: 450px;
height: 240px;
background-color: skyblue;
margin-bottom: 10px;
}
.content .rightPart .main .news .news2{
width: 450px;
height: 110px;
background-color: skyblue;
margin-bottom: 10px;
}
.content .rightPart .main .news .news3{
width: 450px;
height: 30px;
background-color: skyblue;
}
.footer{
width: 970px;
height: 35px;
background-color: pink;
/*没学，就是居中：*/
margin: 0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<!-- 头部 -->
<div>
<div>logo</div>
<div>语言选择</div>
<div>导航条</div>
</div>

<!-- 主要内容 -->
<div>
<div>大广告</div>
<div>
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div></div>
</div>
<div></div>
</div>
</div>

<!-- 页尾 -->
<div></div>
</body>
</html>

実際、このページのレイアウトは次の Web サイトです:

フローティングのクリア

ここでいう浮き解消とは、浮きと浮きの間の衝撃を解消することを指します。

序文

上記の例を通じて、この例の Web ページはフローティングによって横に並べて配置されていることがわかりました。

たとえば、Web ページにはヘッダー、コンテンツ、フッターの 3 つの部分があります。コンテンツ部分を例にとると、コンテンツの息子をフローティングに設定した場合、この息子はまったく新しい標準ストリームであるため、息子の息子はまだ標準ストリーム内にあります。

フローティングを学び始めた初日から、フローティングが始まるとそれを解消する必要があることを理解する必要があります。まずは実験をしてみましょう。

次の例には、2 つのブロックレベル要素 div があります。div には属性がなく、各 div には li があります。結果は次のとおりです:

上記の例この例は簡単です。しかし、内部の <li> タグに float を追加するとします。効果は次のとおりです:

コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{

}
li{
float: left;
width: 100px;
height: 20px;
background-color: pink;


}
</style>
</head>
<body>
<div>
<ul>
<li>生命壹号1</li>
<li>生命壹号2</li>
<li>生命壹号3</li>
<li>生命壹号4</li>
</ul>
</div>
<div>
<ul>
<li>许嵩1</li>
<li>许嵩2</li>
<li>许嵩3</li>
<li>许嵩4</li>
</ul>
</div>
</body>
</html>

効果は次のとおりです:

上の図では2 番目のグループの最初の li は、最初のグループの最後の li に接続されています (当初、これらの li は 2 つの行に分割されると考えていました)。

これは、これから説明する内容、つまりフロートをクリアする最初の方法につながります。
どうすれば解決できますか?

方法 1: 浮動要素の祖先要素に高さを追加する

序文にあるこの現象の根本原因は次のとおりです: li の親 div が高さを設定しません、結果は次の 2 つになります。各 div の高さは 0px です (Web ページの検査要素を通じて確認できます)。 div の高さはゼロであるため、それ自体の浮動子のコンテナーをサポートできません。

コンテナをサポートできないため、その子がコンテナ内で正しく浮遊できなくなります。

さて、この div の高さを設定しても、 div の高さが子の高さより小さい場合、異常現象が発生します。

div に正しく適切な高さを設定します (少なくとも高さが息子の高さより大きいことを確認してください)。正しい現象が確認できます:

概要:

要素をフローティングにする場合、その祖先要素には高さが必要です。

高さのあるボックスのみがフローティング を閉じることができます。（経験者のこの言葉を思い出してください）

高さのある箱の中で浮いている限り、この浮遊物は後続の浮遊要素に影響を与えません。つまり、フローティングの影響をクリアすることです。

#方法 2: clear:both;

Web ページ制作では、高さが表示されることはほとんどありません。なぜ？コンテンツによってブーストできるからです！つまり、先ほど説明した方法1は仕事ではほとんど使われないということです。

それでは、高さを書かずにフロートをクリアすることはできるでしょうか?また、フロートが互いに影響を及ぼさないようにしますか？

現時点では、

clear:both;属性を使用できます。次のように：＃＃＃＃＃＃＃＃＃＃＃＃<pre class="brush:php;toolbar:false">clear:both;</pre> <p>clear就是清除，both指的是左浮动、右浮动都要清除。<code>clear:both的意思就是：不允许左侧和右侧有浮动对象。

这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了。读者可以试试看。

margin失效的本质原因是：上图中的box1和box2，高度为零。

方法3：隔墙法

上面这个例子中，为了防止第二个div贴靠到第二个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性；同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法。

我们看看例子效果就知道了：

上图这个例子就是隔墙法。

内墙法：

近些年，有演化出了“内墙法”：

上面这个图非常重要，当作内墙法的公式，先记下来。

为了讲内墙法，我们先记住一句重要的话：一个父亲是不能被浮动的儿子撑出高度的。举例如下：

（1）我们在一个div里放一个有宽高的p，效果如下：（很简单）

（2）可如果在此基础之上，给p设置浮动，却发现父亲div没有高度了：

（3）此时，我么可以在div的里面放一个div（作为内墙），就可以让父亲div恢复高度：

于是，我们采用内墙法解决前言中的问题：

与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度（让box1有高）。即：box1的高度可以自适应内容。

而外墙法，虽然一道墙可以把两个div隔开，但是这两个div没有高，也就是说，无法wrap_content。

清除浮动方法4：overflow:hidden;

我们可以使用如下属性：

overflow:hidden;

overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。如下：

上图显示，overflow:hidden;的本意是清除溢出到盒子外面的文字。但是，前端开发工程师发现了，它能做偏方。如下：

一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。

举个例子：

那么对于前言中的例子，我们同样可以使用这一属性：

更多编程相关知识，请访问：编程视频！！

以上がCSSフローティングの方法とは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

2つの画像とAPI：製品のリクロッキングに必要なすべてApr 15, 2025 am 11:27 AM

最近、製品画像の色を動的に更新するソリューションを見つけました。したがって、製品の1つだけで、私たちはそれをさまざまな方法で色付けすることができます

毎週のプラットフォームニュース：サードパーティのコード、パッシブ混合コンテンツ、最も遅い接続のある国の影響Apr 15, 2025 am 11:19 AM

今週のラウンドアップでは、灯台はサードパーティのスクリプトに光を当て、安全なリソースが安全なサイトでブロックされ、多くの国の接続速度がブロックされます

独自の非JavaScriptベースの分析をホストするためのオプションApr 15, 2025 am 11:09 AM

サイトの訪問者と使用データを追跡するのに役立つ分析プラットフォームがたくさんあります。おそらく、特にGoogleアナリティクスが広く使用されています

それはすべて頭の中にあります：Reactヘルメットを使用してReact Poweredサイトのドキュメントヘッドを管理するApr 15, 2025 am 11:01 AM

ドキュメントヘッドはウェブサイトの中で最も魅力的な部分ではないかもしれませんが、それに入るものは間違いなくあなたのウェブサイトの成功にとってそれと同じくらい重要です

JavaScriptのsuper（）とは何ですか？Apr 15, 2025 am 10:59 AM

子のクラスでsuper（）？を呼び出すJavaScriptを見たときに何が起こっているのか、Super（）を使用して親のコンストラクターとSuperを呼び出します。そのアクセス

さまざまな種類のネイティブJavaScriptポップアップを比較しますApr 15, 2025 am 10:48 AM

JavaScriptには、ユーザーインタラクション用の特別なUIを表示するさまざまな内蔵ポップアップAPIがあります。有名：

アクセス可能なWebサイトが構築が難しいのはなぜですか？Apr 15, 2025 am 10:45 AM

先日、私は多くの企業がアクセス可能なウェブサイトを作るのに苦労している理由について、フロントエンドの人々とおしゃべりをしていました。アクセス可能なWebサイトがとても難しいのはなぜですか

「隠された」属性は目に見えて弱いですApr 15, 2025 am 10:43 AM

あなたがそれがすべきだと思うことを正確に行うHTML属性があります：

See all articles

ホットAIツール

ホットツール

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

メモ帳++7.3.1

使いやすく無料のコードエディター

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。