<！DOCTYPE html > < html lang = "zh" > < head > < meta charset = "UTF-8" > < title > CSS3初识（五）布局-浮动</ title > < スタイル> .list> div：nth -child（2n + 1）{ width ：100px ; 高さ：100px ; } .list> div：nth-child（2n）{ width ：150px ;150px ; } .box1 { background-color ：#bbffaa ; } .box2 { background-color ：blueviolet ; float ：left ; } .box3 { / * box3がフロートしない理由は、box2がコンテンツの行を占有するためです（満足する必要があります）方程式の要件）* / background-color ：orange ; float ：left } .box4 { background-color ：pink ; float ：right ; } .box5 { background-color ：yellowgreen ; float ：left ; } .box6 { background-color ：burlywood ; } / * フローティングすると、要素を親要素の左または右に移動して、ドキュメントフロー フロート（フロート属性）： オプション値： なし：デフォルト値、要素は 左にフロートしません：要素は 右にフロートします： 要素は右にフロートします要素がフロートに設定された後、水平レイアウトの方程式を強制的に確立する必要はありません詳細については、ボックスモデルのレイアウトチャプターを初めて参照してください） 要素がフロートに設定された後、要素はドキュメントフローから完全に切り離され、ドキュメントフローの位置を占有しなくなり ます 。そのため、下の要素は自動的に上に移動します機能：1.浮動要素はドキュメントフローから完全に切り離され、ドキュメントフローの位置を占有しなくなります 2.設定フローティング後、要素は親要素の左または右に移動します 。3。フローティング要素は、デフォルトでは親要素から削除されません 。4 。フローティング要素が左または右に移動しても、その前にある他のフローティング要素を超えません 。5。フローティングエレメントが非フローティングブロックエレメントの上にある場合、フローティングエレメントは上に移動できません。6 フローティングエレメントは、その上のフローティング兄弟エレメントを超えることはありません。 2つのボックスを入れ替えることができます（図を参照）。 その他の機能： 1.フローティング要素はテキストを覆いません。テキストはフローティング要素を自動的に折り返します。そのため、フロートを使用して、図を囲むテキストの効果を設定できます 。2.要素の設定フロート後、文書の流れから離脱した後、素子の特性のいくつかは変更され、文書の流れから除去されます ドキュメントフローからの特徴： ブロック要素： 1、ブロック要素は、ページの別ラインではありません 図2は、ドキュメントストリーム、ブロック要素のコンテンツのデフォルトの幅と高さから逸脱した後に延伸されていない インライン要素： 1.インライン要素は 、ドキュメントフローを離れると、ブロック要素と同じ特性を持つブロック要素になります。ドキュメントフローを離れると、ブロックと行を区別する必要はありません * / </ style > </ head > < body > < div class = "list" > < div class = "box1" > Box 1 </ div > < div class = "box4" > Box 4 </ div > < div class = "box2" > Box 2 </ div > < divclass = "box3" > Box 3 </ div > < p > Dao De Jing [Chapter 1]の全文は公平で並外れていて、その名前は並外れていて非常に有名です。名前のない世界の初めに、すべてのものの母があります。したがって、多くの場合、その美しさを観察したいという欲求はなく、多くの場合 、その利点を観察したい（jaào）。2つは同義であり、名前が異なります。〖翻訳〗 【第2章】世界のすべての人々は、美は美であり、悪（è）はすでに知られていることを知っています。そのため、相 利性がなく、差をつけることが難しく、長さが短く、位相が高く、音が調和し、お互いに追従します。それは、聖徒が無作為に行い、言葉を言わずに教える、すべてのことは何も言わない、 彼らなしで生まれる、忍耐しない、そして人生で成功することに基づいています。夫（fú）は一人暮らしのため、行きません。〖翻訳〗 </ p > </ div > < div class = "box5" > Box 5 </ div > < div class= "box6"カセット子6 </ div > </ body > </ html >
