Floatで簡(jiǎn)単にはじめるHTML+CSS (float)
floatとは
CSS Float(フロート)は要素を左右に移動(dòng)させ、その周りの要素も並べ替えます。
Float(フロート)は畫(huà)像によく使われますが、レイアウトにもとても便利です
要素の浮き方
要素の水平方向が浮くので、要素は左右にのみ移動(dòng)でき、上下には移動(dòng)できないことを意味します。
フローティング要素は、その外縁がそれを含むボックスまたは別のフローティング ボックスの境界線に觸れるまで、左または右に移動(dòng)しようとします。
フロート要素の後の要素がそれを囲みます。
フローティング要素の前の要素は影響を受けません。
畫(huà)像が右にフロートされている場(chǎng)合、下のテキストフローは畫(huà)像の左側(cè)に折り返されます
div{
float:right;
}
以下の例を?qū)g行します: たとえば、divが2つありますさまざまな背景を持つ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮動(dòng)</title>
<style type="text/css">
/*在這里會(huì)用到id選擇器*/
div{
width:600px;
height:600px;
border:1px solid black;
}
#dv1{
width:100px;
height:100px;
background-color:green;
float:left;
}
#dv2{
width:100px;
height:100px;
background-color:red;
float:left;
}
</style>
</head>
<body>
<div>
<div id='dv1'></div>
<div id='dv2'></div>
</div>
</body>
</html>
