ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSフローティングの方法とは何ですか？

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

青灯夜游オリジナル: 2021-04-30 13:58:544260ブラウズ

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

このチュートリアルの動作環境: 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 属性により、上の図の最初の

dc6dce4a544fdca2df29d5ac0ea9906b タグは浮いているように見えるため、このタグは別のレベルに配置されます。 2 番目の dc6dce4a544fdca2df29d5ac0ea9906b も、独自のレベルの標準フローに従って配置されます。

証拠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 があります。結果は次のとおりです:

上記の例この例は簡単です。しかし、内部の 25edfb22a4f469ecb59f1190150159c6 タグに 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，高度为零。