記事のディレクトリ
1.従来のWebページレイアウトの3つの方法
CSSは、3つの従来のレイアウト方法（つまり、ボックスを順番に配置する方法）を提供します。
- 通常のフロー（標準フロー）
いわゆる標準フロー：ラベルは、規定されたデフォルトの方法で配置されます。
- ブロックレベルの要素は、上から下に順番に配置されて、それ自体で行を占有します。
一般的な要素：div、hr、p、h1〜h6、ul、ol、dl、form、table - 行の要素は左から右に順番に配置され、親要素の端に触れると自動的に折り返されます。
一般的な要素：span、a、i、emなど。
上記はすべて標準フローレイアウトです。以前に学習したのは、最も基本的なレイアウト方法である標準フローです。
- 浮く
- ポジショニング
注：実際の開発では、ページには基本的にこれら3つのレイアウト方法が含まれています（モバイル端末は後で新しいレイアウト方法を学習します）。
2.なぜ浮く必要があるのですか
2.1複数のブロックレベルボックス（div）を水平に一列に配置するにはどうすればよいですか？
コード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box {
float:left;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</body>
</html>
インラインブロック要素に変換すると1行表示になりますが、それらの間に大きなギャップがあり、制御が困難です。
2.2 2つのボックスの左右の配置を実現するにはどうすればよいですか？
コード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.left {
float:left;
}
.right {
float:right;
}
</style>
<body>
<div class="left">1</div>
<div class="right">2</div>
</body>
</html>
2.3まとめ
概要：レイアウト効果が多く、標準フローを完了できません。現時点では、floatを使用してレイアウトを完了することができます。floatは、要素ラベルのデフォルトの配置を変更できるためです。
フローティングの最も一般的なアプリケーション：複数のブロックレベルの要素を1行に表示できます。
Webページレイアウトの最初のルール：標準ストリームを見つけるために複数のブロックレベルの要素が垂直に配置され、フローティングを見つけるために複数のブロックレベルの要素が水平に配置されます。
3.フロートとは
float属性は、フローティングボックスを作成し、左端または右端が包含ブロックまたは別のフローティングボックスの端に接触するまで片側に移動するために使用されます。
文法：
选择器 { float: 属性值; }
4.フローティング特性
4.1フローティングエレメントは標準フローから逸脱します（標準外）
標準の通常の流れの制御から離れて（フローティング）、指定された位置に移動します（移動）（一般に標準外と呼ばれ
ます）フローティングボックスは元の位置を保持しなくなります
4.2フローティング要素が一行で表示され、要素の上部が整列されます
注：フローティング要素は互いに接続されています（ギャップはありません）。親の幅がこれらのフローティングボックスに収まらない場合、追加のボックスは新しい行に配置されます。
4.3フローティング要素は、インラインブロック要素の特性を備えています。
どの要素も浮くことができます。要素の元のモードに関係なく、フロートを追加した後は、インラインブロック要素と同様の特性を持ちます。
- ブロックレベルのボックスで幅が設定されていない場合、デフォルトの幅は親と同じですが、フロートを追加した後、そのサイズはコンテンツに応じて決定されます
- フローティングボックス間に隙間はなく、隣り合っています
5.フローティング要素は、多くの場合、標準ストリームの親と組み合わせて使用されます
フローティング要素の位置を制限するために、Webページのレイアウトで一般的に採用されている戦略は、
最初に標準フローの親要素で上下の位置を配置し、次に内部の子要素のフローティング配置を採用することです。 Webページレイアウトの最初の標準に沿っています。
6.一般的なレイアウトの例
6.1
中に2つのボックスがある大きなボックスと考えてください。これらの2つのボックスはフロートを使用する必要があります
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 1200px;
height: 460px;
background-color: pink;
margin: 0 auto;
}
.left {
width: 230px;
height: 460px;
float:left;
background-color:cornflowerblue;
}
.right {
float: left;
width: 970px;
height: 460px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
6.2
4つの小さな箱がある大きな箱と考えてください。4つの小さな箱はすべてフロートを使用しています。
これは、ulliを使用して実現できます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 1226px;
height: 285px;
background-color: pink;
margin: 0 auto;
}
.box li {
float:left;
width: 296px;
height: 285px;
background-color: powderblue;
margin-right: 14px;
}
.box .last {
margin-right: 0px;
}
</style>
</head>
<body>
<ul class="box">
<li></li>
<li></li>
<li></li>
<li class="last"></li>
</ul>
</body>
</html>
6.3
2つのサブボックスがある大きなボックスと考えてください。左側のボックスはフロートを使用した紫色のボックスです。右側のボックスにはさらに8つのサブボックスがあり、すべてフロートを使用してulliで実装されています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 1226px;
height: 615px;
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 615px;
background-color: purple;
}
.right {
float: left;
width: 992px;
height: 615px;
background-color: skyblue;
}
.right li {
float: left;
width: 234px;
height: 300px;
background-color: pink;
margin-left: 14px;
margin-bottom: 14px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<ul class="right">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</body>
</html>
6.4
上から下に4つの大きな箱として見られる
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style:none;
}
.top {
height: 50px;
background-color: skyblue;
}
.banner {
width: 830px;
height: 200px;
background-color: skyblue;
margin: 15px auto;
}
.box {
width: 830px;
height: 300px;
background-color:skyblue;
margin: 0 auto;
}
.box li {
float: left;
width: 200px;
height: 300px;
background-color: gray;
margin-right: 10px;
}
.box .last {
margin-right: 0;
}
.footer {
height: 100px;
background-color: skyblue;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>
6.5
次の2つもWebページの一般的なレイアウトなので、書きたくありません
