*

CSSのfloatに基本

公開日: : CSS&HTML

お約束

CSSをリセットする。

<head>
<meta charset="utf-8">
<title>test01</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="mystyle01.css">
</head>

CSSを読み込む前にリセットしておく。Yahooのサイトにリセットがあるので、リンクを張るだけ。(4,5行目)

float:left の例(どちらも、左から回り込む)

#main {
width:400px;height:100px;float:left; 
background: pink;
}

#sub {
width:100px;height:100px;float:left; 
background: yellow;
}

実際の画像

float:left
main,subとも、float:left =「左詰め」

 

float:left float:right の例

(mainは右から回り込む、subは左から回り込む)

#main {
width:400px;height:100px;float:left; 
background: pink;
}

#sub {
width:100px;height:100px;float:right; 
background: yellow;
}

 

実際の画像

float:leftとfloat:right
main float:left=「右詰め」 と sub float:right 「左詰め」

 

 

footerを追加だけします。

main,subはどちらも float:leftの場合

#main {
width:400px;height:100px;float:left; 
background: pink;
}

#sub {
width:100px;height:100px;float:left; 
background: yellow;
}

#footer {
width:100px;height:100px;float:left; 
background: green;

 

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>test01</title>
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.1/build/cssreset/cssreset-min.css">
	<link rel="stylesheet" href="mystyle01.css">
</head>
<body>
<div id="main">
mainのコンテンツです。
</div>
<!-- /main -->

<div id="sub">
subのコンテンツです。
</div>
<!-- /sub -->

<div id="footer">
footerのコンテンツです。
</div>
<!-- /footer -->


</body>
</html>

 

実際の画像

左詰めでfooterを追加

 

左詰めでfooterを追加すると横一列にmain,sub,footer

 

float:left float:rightに #footerを追加した場合

 

#main {
	width:400px;height:100px;float:left; 
	background: pink;
}

#sub {
	width:100px;height:100px;float:right; 
	background: yellow;
}

#footer {
	width:100px;height:100px;float:left; 
	background: green;

 

 

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>test01</title>
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.1/build/cssreset/cssreset-min.css">
	<link rel="stylesheet" href="mystyle01.css">
</head>
<body>
<div id="main">
mainのコンテンツです。
</div>
<!-- /main -->

<div id="sub">
subのコンテンツです。
</div>
<!-- /sub -->

<div id="footer">
footerのコンテンツです。
</div>
<!-- /footer -->


</body>
</html>

 

 

実際の画像


2014-11-28_182757

 

 

 

必ず、回り込みを解除する。

clear: both; の場合(footerの高さを指定していない)

 

#main {
	width:400px;height:100px;float:left; 
	background: pink;
}

#sub {
	width:100px;height:100px;float:right; 
	background: yellow;
}

#footer {
	clear: both; 
	background: green;

 

 

実際の画像

 

clear: both; の場合

 

 

clear: left; の場合(footerの高さを指定していない)

 

#main {
	width:400px;height:100px;float:left; 
	background: pink;
}

#sub {
	width:100px;height:100px;float:left; 
	background: yellow;
}

#footer {
	clear: left; 
	background: green;

 

 

実際の画像

clear: left; の場合

 

左に回り込むを解除(左詰めを解除)しているので、左に回り込まない。
->下に表示される

 

関連記事

rowspanとcolspan

      1番上の表 rowspan="

記事を読む

DOCTYPE宣言を必ずする習慣をつける

*僕のメモです。 DOCTYPE宣言を必ずする習慣をつける *これは僕のメモです

記事を読む

Windows10(x64)に、Apache2.4(x64)、MySQL5.7(x64)、MyCDBC(x86)、PHP 7.1.10、OfficeProffesional2007(x86)をインストールする

これは僕自身のメモです。 ノートパソコンに上記のものをインストールす

XserverでのMySQLからMariaDB

これは自分のメモです。 Xserverでは自動的にMySQLからMa

複数の引数を渡す方法

これは僕のメモです。   &lt;?PHP

phpmyadminで編集できない時の対応

これは僕のメモです。 phpmyadminで編集・コピー・削除が

CSSの変更をChromeにすぐ反映させる方法

これは、僕自身のメモです。   『スーパーリロー

→もっと見る

PAGE TOP ↑