Floatで簡単にはじめるHTML+CSS (float)

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>

学び続ける

新しいファイル

<!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>

提出するリセットコード

自動運転