浮动原理
Posted dxwen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浮动原理相关的知识，希望对你有一定的参考价值。
浮动原理：
w3c:
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
浮动非替换元素要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
我：
（以下以全部设置为float:left;为例）
如果包含框太窄，无法容纳水平排列的几个浮动元素，那么第一个容纳不下的浮动块会带着它后面 的浮动块一起向下移动，直到可以向左移动，则向左移动到边框或另一个浮动框，然后判断是否能容纳第一个浮动块，能则第一个浮动块留在这里，其后面的浮动块继续前面的操作，不能则第一个浮动块和后面的浮动块继续前面的操作。
下面是几个例子：
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="test01.css"/>
</head>
<body>
<div class="div_outer">
<div class="div_in1">
11111111111111111111
</div>
<div class="div_in2">
22222222222222222222
</div>
<div class="div_in3">
33333333333333333333
</div>
<div class="div_in4">4444</div>
<div class="div_in5">4444</div>
<div class="div_in6">4444</div>
</div>
</body>
</html>
css
.div_outer{
height: 500px;
width: 280px;
background: #000;
}
/* 例1 */
/*.div_in1{*/
/*height: 100px;*/
/*width: 100px;*/
/*background: red;*/
/*float: left;*/
/*}*/
/*.div_in2{*/
/*height: 50px;*/
/*width:150px;*/
/*background: green;*/
/*float: left;*/
/*}*/
/*.div_in3{*/
/*height: 60px;*/
/*width: 50px;*/
/*background: blue;*/
/*float: left;*/
/*}*/
/*.div_in4{*/
/*height: 100px;*/
/*width: 140px;*/
/*background: orange;*/
/*float: left;*/
/* 例2 */
/*.div_in1{*/
/*height: 100px;*/
/*width: 100px;*/
/*background: red;*/
/*float: left;*/
/*}*/
/*.div_in2{*/
/*height: 50px;*/
/*width:150px;*/
/*background: green;*/
/*float: left;*/
/*}*/
/*.div_in3{*/
/*height: 60px;*/
/*width: 50px;*/
/*background: blue;*/
/*float: left;*/
/*}*/
/*.div_in4{*/
/*height: 30px;*/
/*width: 30px;*/
/*background: orange;*/
/*float: left;*/
/*}*/
/* 例3 */
.div_in1{
height: 100px;
width: 100px;
background: red;
float: left;
}
.div_in2{
height: 50px;
width:150px;
background: green;
float: left;
}
.div_in3{
height: 60px;
width: 50px;
background: blue;
float: left;
}
.div_in4{
height: 100px;
width: 140px;
background: orange;
float: left;
}
.div_in5{
height: 90px;
width: 100px;
background: grey;
float: left;
}
.div_in6{
height: 50px;
width: 50px;
background: orchid;
float: left;
}
以上是关于浮动原理的主要内容，如果未能解决你的问题，请参考以下文章