代码:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#a {
background-color: Red;
height: 50px;
width: 100px;
border-style: dashed;
border-color: gray;
}
#b {
background-color: Yellow;
height: 50px;
width: 200px;
border-style: dashed;
border-color: gray;
}
#c {
background-color: Blue;
height: 50px;
width: 300px;
border-style: dashed;
border-color: gray;
//float:left;
}
#d {
background-color: Gray;
height: 50px;
width: 400px;
border-style: dashed;
border-color: red;
//float:left;
}
#e {
background-color: Gray;
height: 110px;
width: 500px;
border-style: dashed;
border-color: red;
//float:left;
}
#input1 {
//float:left;
}
#input2 {
// float:left;
}
#input3 {
//float:left;
}
#input4 {
// float:left;
}
</style>
</head>
<body>
<div id=a>div-a</div>
<div id=b>div-b</div>
<div id=c>div-c</div>
<input id="input1" type="text" value="input1" />
<input id="input2" type="text" value="input2" />
<input id="input3" type="text" value="input3 " />
<div id=d>div-d</div>
<input id="input4" type="text" value="input4 " />
<div id=e>div-e</div>
</body>
</html>
没有浮动的效果为:
div-a 浮动后,b作为一个块级元素占据a的空间,就是a覆盖了b的一部分,并且b的文字,被挤了出来。这也是做图文并排时候的效果:
div-c浮动:(c后面是input,是行内元素),效果如下:
可以看出c浮动后,c后面那些行内元素,都紧跟着浮动元素,后面的div-d,就占据了一部分c的空间。
把input4左浮动,效果如下:
input4左浮动后,块级元素e就占据了它的空间,并把后面的块级元素挤出去。
最后是把inout2左浮动:
input2左浮动后,input1紧跟着input2,注意是紧跟没有距离。
由上面实践,得出结论: