id="a"></div><div
id="b"></div>那么默认情况下id为b
的div
排在
a的下方,我们称这种布局为标准流,设置浮动后对象就脱离了标准流,就像水面上的漂浮物一样,不再严格的按照标准流排列。浮动的取值如下:
left:对象浮在左边
right:对象浮在右边
clear
清楚左,,右
浮动。。。
例如下面的代码:
<div
id="container"
>
<div
id="left"></div>
<div
id="right“></div>
<div
id="bottom></div>
</div>
此时left
right
bottom
3个div
是从上到下排列,如果我们给left
添加一个浮动属性
float:left,那么3个div会从左到右排列,这是因为left
的浮动也会影响到后面的对象,如果我们给bottom
添加一句clear:both,那么bottom就不会再排在right的右边了,这是因为我们用clear:both清除了前面浮动对象对bottom的影响
如果不采用float，不妨考虑Flex布局
这几种布局都可以简单实现，换行的话也是一行代码即可，如下图
以下是一个简单的flex布局：
<!--思路：让原本每个子div都占据一行的变成五个一共占一行，在不使用float的情况下，使用flex去实现--><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.content{ display:-webkit-flex display:flex} /*Flex布局*/
/*注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。*/
</style>
<body>
<!--设置若干个div，content下的div在flex 的作用下，都会往左浮动-->
<div class="content"> <!--设置类名-->
<div>1</div><!--设置5个div-->
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
CSS有float:left和float:right，但能否实现float:center呢？水平居中浮动，当然是可以的，这里将介绍你实现方法。以下面的Li列表为例，我们要实现中间LI的居中浮动：
1 <div id="macji">
2 <ul class="macji-skin">
3 <li>列表一</li>
4 <li>列表二</li>
5 <li>列表三</li>
6 </ul>
7 </div>
我们需要先了解下position:relative属性，它是指left、right、top、bottom等中的偏移位置。我们可以让ul为position:relativeleft:50%，再让li向左浮动，再让position:relativeright:50%（或者left:-50%），那么li就会向中间浮动一样居中了。不相信的可把下面的CSS定义结合上边的代码拷贝到HTML测试。
view source
01 #macji{
02 position:relative
03 width:100%
04 height:80px
05 background-color:#eee
06 text-align:center
07 overflow:hidden
08 }
09 #macji .macji-skin{
10 float:left
11 position:relative
12 left:50%
13 }
14 #macji .macji-skin li{
15 position:relative
16 right:50%
17 float:left
18 margin:10px
19 padding:0 10px
20 border:solid 1px #000
21 line-height:60px
22 }
虽然这样用有些麻烦，但对于一个优秀的前端设计师，这个技巧还是有必要掌握的哦。
