CSS Float(フロート)
フロートとは何ですか?
float は float です。CSS でのその機(jī)能は、通常のドキュメント フローから要素を取り出し、その親要素の「左端」または「右端」に移動(dòng)することです。以下では、この定義におけるいくつかの名詞の概念について説明します:
ドキュメント フロー: HTML では、ドキュメント フローは要素が上から下に配置される順序です。
ドキュメント フロー外: 要素が通常の順序から外れています。
左端/右端: 前述の親要素の左端と右端への移動(dòng)は、要素が別の浮動(dòng)要素または親要素のコンテンツ領(lǐng)域 (パディングを除く) の境界に當(dāng)たるまで左または右に移動(dòng)することを意味します。
float屬性:
① left: 要素は左にフロートします。
② right: 要素は右にフロートします。
③ none: デフォルト値。
④inherit: 親要素からfloat屬性を継承します。
例: 左float
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實(shí)例</title>
<title>float屬性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
float:left;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
}
</style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>例: 右float
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實(shí)例</title>
<title>float屬性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
float:right;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
float:right;
}
</style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>隣り合う浮動(dòng)要素
複數(shù)の浮遊要素を一緒に配置すると、スペースがあれば隣同士になります。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實(shí)例</title>
<title>float屬性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
}
div
{
float:left;
}
</style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>Float のクリア - Clear を使用して要素をフローティングした後、周囲の要素が再配置されます。これを回避するには、clear 屬性を使用します。 clear 屬性は、浮動(dòng)要素が要素の両側(cè)に表示できないことを指定します。
