floatとは
CSS Float(フロート)は要素を左右に移動させ、その周りの要素も並べ替えます。
Float(フロート)は画像によく使われますが、レイアウトにもとても便利です
要素の浮き方
要素の水平方向が浮くので、要素は左右にのみ移動でき、上下には移動できないことを意味します。
フローティング要素は、その外縁がそれを含むボックスまたは別のフローティング ボックスの境界線に触れるまで、左または右に移動しようとします。
フロート要素の後の要素がそれを囲みます。
フローティング要素の前の要素は影響を受けません。
画像が右にフロートされている場合、下のテキストフローは画像の左側に折り返されます
div{
float:right;
}
以下の例を実行します: たとえば、divが2つありますさまざまな背景を持つ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
/*在这里会用到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>
次のセクション