4つのfloatパラメーター：左、右、なし、継承の継承
テキストの折り返し、水平方向の配置を実現し、親要素
の折りたたみを解決します。クリアフロートを使用して折りたたみの問題を解決する方法
float：leftを使用し、ブロックレベルの要素の水平配置を実現します
<style>
*{
padding: 0;
margin: o;
}
.test{
width:100px;
height: 100px;
background:red ;
float: left;
margin-right: 10px;
}
</style>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
テキストの折り返し効果を実現するための
フロート：フロートを使用：左または右
なぜ絵の周りに浮かぶことができますか？
実際、floatを使用すると、ブロック要素になります。通常のドキュメントフローからの逸脱レイアウトを調整します。だがまだ占領している通常のテキストフロー用のスペース。
画像が表示された後、テキストは通常どおり表示されます。
cssの位置決めメカニズム
標準フロー、位置決め、フローティング
<style>
*{
padding: 0;
margin: o;
}
.per{
width:500px;
height: auto;
border:1px solid #000 ;
}
.test{
width:100px;
height: 100px;
background:red ;
float: left;
}
.bro{
width:100px;
height: 100px;
background:blue ;
}
</style>
<body>
<div class="per">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="bro"></div>
</div>
</body>
このとき、高さがなくなり、フロートがドキュメントフローから外れていることがわかります。これは副作用の1つです。
broはフロートしません。親要素の下に表示されますが、テスト中は表示されます。これは、フローティングによって引き起こされる2番目の副作用です。
给父元素加高度,但这方法不适用，当给子元素加数量时又会撑开。
.per{
width:500px;
height: 10px;
border:1px solid #000 ;
}
2.用clear属性
clear：none，left，right，both
3.给父元素加overflow和zoom
.per{
width:500px;
height: 10px;
border:1px solid #000 ;
overflow:hidden; /*解决溢出问题的*/
zoom:1; /*IE专属的*/
}
使用这两个可以很好的兼容浏览器
4.给父元素也加float元素
但有个缺点：父类的兄弟元素则也陷入了
还要给父类的兄弟元素加clear:both;
before ::疑似クラスのフローティングクリアリングを使用すると、将来的にはより適切に実現できます。
応用
<style>
*{
padding:0;
margin: 0;
}
.head{
width:100%;
height: 64p×;
}
.logo{
width:160px;
height: 40p×;
float:left;
}
.nav{
width:320px;
height: 64p×;
float:left;
}
.nav-li{
width: 80px;
height:64px;
text-align: center;
line-height: 64px;
color:#333;
float:left;
}
.icons{
width:320px;
height:64px;
float:right;
}
.i01{
width: 64px;
height:64px;
float:left;
background: url("o01.png") center no-repeat;
}
.i02{
width: 64px;
height:64px;
float:left;
background: url("o01.png") center no-repeat;
}
.i03{
width: 64px;
height:64px;
float:left;
background: url("o01.png") center no-repeat;
}
.i04{
width: 64px;
height:64px;
float:left;
background: url("o01.png") center no-repeat;
}
.i05{
width: 64px;
height:64px;
float:left;
background: url("o01.png") center no-repeat;
}
</style>
<body>
<div class="head">
<div class="logo">
<img src="logo.png" width="160" height="40" alt="">
</div>
<div class="nav">
<div class="nav-li">实战</div>
<div class="nav-li">路径</div>
<div class="nav-li">猿问</div>
<div class="nav-li">手记</div>
</div>
<div class="icons">
<div class="i01"></div>
<div class="i01"></div>
<div class="i03"></div>
<div class="i04"></div>
<div class="i05"></div>
</div>
</div>
</body>
次へ：
CSSの配置。要素をページ上の任意の位置に固定します。