CSS浮动布局_教程

说浮动布局，就得先知道文档流，文档流有 正常文档流 、 脱离文档流 。

对应的正常文档流如图，

例如01：

结果：

分析：对div01设置了左浮动，使div01脱离了文档流，div01是在div02的上面一层，实际的div02还是占据了一整行，div02的文字部分看着像被挤出来了，其实这就是文字环绕的实现（文字是英文时有点问题）。

例如02：

只设置后面两个div左浮动

结果：

例如03：

全部设置左浮动，会从左到右依次排列。（right的相反）注意这里出现了父元素高度塌陷，height为0

2.浮动带来的影响

效果如图：对比例3，父元素高度塌陷问题解决

此外，浮动可以用来实现两列布局或多列布局

例如：

结果：

CSS中li设置左浮动后,li下面的a控制位置方式为：

li a{margin-left:20pxmargin-top:12pxdisplay:blockwidth:20px}

详情:

a标签写样式时要加display:block属性，

这样a标签就显示一行了。

一个li下面有多个a标签的话，就得给他们定宽度，

必要的情况下就float:left。

如果不采用float，不妨考虑Flex布局

这几种布局都可以简单实现，换行的话也是一行代码即可，如下图

以下是一个简单的flex布局：

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<style>

.content{ display:-webkit-flex display:flex} /*Flex布局*/

/*注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。*/

</style>

<body>

</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

CSS浮动布局