ホームページ > 記事 > ウェブフロントエンド > CSSのfloatについて詳しく解説
CSSのfloatについて詳しく解説
- 高洛峰オリジナル
- 2017-03-17 12:47:111772ブラウズ
float は、おそらく CSS3 より前の Web ページのレイアウトで最も一般的に使用されていた属性です。お互いに同意しないという理由だけで float するコードをよく見かけます。半分天使で半分悪魔であるこの属性について詳しく見てみましょう。 。
この記事は、MOOC.com のマスター、Zhang Xinxu のフロート ビデオを読んだ後の要約と拡張された使用法です。このビデオは、最初に読んだときは退屈ですが、注意深く読んだ後はさらに退屈であることがわかります。 。 。 。 。 。しかし、落とし穴に遭遇した後にもう一度読むと、一言一言が貴重な良心のビデオに出会うでしょう。早速、始めましょう:
1. float の起源
float の元のデザインは、テキストの折り返し効果を作成することであり、それがデザイナーが私たちに望んでいたことでした。
2.float パラメータ
float 属性には 3 つのパラメータ値があります:
left: 要素が左側に浮動することを示します。
right: 要素が右に移動することを示します。
none: Object はフロートせず、標準のドキュメント フローに従います。
3.効果表示 (float:leftを例にします。float:rightの場合は位置の違いだけです)
<style> p{
height: 20px;}
.d1{
width: 50px;
background: hsl(100,50%,80%);
}
.d2{float: left;
width: 100px;
background: hsl(150,50%,80%);
}
.d3{
width: 250px;
height: 100px;
background: hsl(10,50%,80%);
}
.d4{float: left;
width: 300px;
background: hsl(250,50%,80%);
}
span{
margin-right: 3px;
border-right: solid 1px #ccc;
background-color: hsl(60,50%,80%);
}
.s3{
float:left;
}</style> <body> <p class="d1">p1</p><p class="d2">p2有float</p><p class="d3">p3</p><span class="s1">span1</span><span class="s2">span2</span><span class="s3">span3有float</span><p class="d4">p4有float</p><span class="s4">span4 </span></body>
ブラウザの幅が足りない場合:
ブラウザの幅が十分に長い場合:
次の結論を導き出すことができます:
フローティング要素がブロック要素の場合、その次の隣接要素 (フローティングではない) はブロック要素と同じになります。ブロック要素。フローティング要素が重なっている場合は、フローティング要素が上になります。次に隣接する要素が インライン要素 の場合、フローティング要素の後に続きます。
フロート要素がインライン要素の場合、ブロック要素であれば隣の要素（フロートされていない）は移動しませんが、幅が足りないと重なりが発生します。次に隣接する要素がインライン要素の場合は、フローティング要素の後に続きます。
4.フロートの破壊性
フロートに設定された要素はドキュメントフローから切り離され、親要素の高さが「折りたたまれ」ます。
<p style="border:3px dashed #ddd"> <p>我还没设置float属性</p></p>
<p style="border:3px dashed #ddd"> <p style="float:left">我设置了float属性</p></p>
5.Floating Wrapperity
これはFloatなしのp
です
これはフロート付きのPです
6. スペースを削除するためのフローティング
これは上記のコードと結論で示されました。簡単に言えば、通常のドキュメント フローでは、フローティングによって上下に隙間が存在します。このギャップにより、2 つの要素をシームレスに組み合わせることができ、上部と下部の要素間のギャップも解消されます。
7.1 clear属性を使用します
a. <p style="clear:both;"></p>を最後の子タグとして配置し、親タグでもある親タグに配置します。最も簡単なクリア方法 フローティング方法ですが、推奨されません。
b.after伪元素和zoom
after，就是指标签的最后一个子元素的后面。因此我们可以用CSS代码生成一个具有clear属性的元素
<style>.myp{
border:3px dashed #ddd }
.myp:after{
content: "";
clear:both;
display: block;
}</style><body><p class="myp">
<p style="float:left">我设置了float属性</p></p></body>
但是ie6/7无法识别伪元素after，就得用zoom方式，例：
.myp{
border:3px dashed #ddd;
zoom:1
}
7.2
给父元素添加浮动，或者overflow:hidden,position:absolute等可以使元素BFC化的属性，下节单独探讨BFC的生成条件和布局规则，例：
<style>
.myp{
border:3px dashed #ddd;
overflow: hidden;
}</style> <body> <p class="myp">
<p style="float:left">我设置了float属性</p></p></body>
关于float的布局以及清除影响就先到这了，有遗漏和错误的地方欢迎指正，下节来一起看看BFC到底是什么，他是如何布局的，为什么可以用来清除浮动。
以上がCSSのfloatについて詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。