フロートとは何ですか?
float は float です。CSS でのその機能は、通常のドキュメント フローから要素を取り出し、その親要素の「左端」または「右端」に移動することです。以下では、この定義におけるいくつかの名詞の概念について説明します:
ドキュメント フロー: HTML では、ドキュメント フローは要素が上から下に配置される順序です。
ドキュメント フロー外: 要素が通常の順序から外れています。
左端/右端: 前述の親要素の左端と右端への移動は、要素が別の浮動要素または親要素のコンテンツ領域 (パディングを除く) の境界に当たるまで左または右に移動することを意味します。
float属性:
① left: 要素は左にフロートします。
② right: 要素は右にフロートします。
③ none: デフォルト値。
④inherit: 親要素からfloat属性を継承します。
例: 左float
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</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>实例</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>
隣り合う浮動要素
複数の浮遊要素を一緒に配置すると、スペースがあれば隣同士になります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</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 属性は、浮動要素が要素の両側に表示できないことを指定します。
次のセクション
