CSS浮动布局

html-css026

CSS浮动布局,第1张

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

对应的正常文档流如图，

例如01：

结果：

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

例如02：

只设置后面两个div左浮动

结果：

例如03：

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

2.浮动带来的影响

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

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

例如：

结果：

左浮动即float:left，使布局元素靠左浮动。右浮动即float:right，使布局元素靠右浮动。在网页布局中结合这两种布局方式可以设计出千变万化的布局形式！只要发散你的思维，开拓你的想象相信定能设计出好的作品！祝你成功！