带大家深入了解浮动布局

网络整理 - 07-27

我们使用的非常频繁，一般都是应用在图文混排中，我们这里再深入了解一下浮动布局。

浮动在历史上最初是做什么的？

在最开始的web发展初期，只有一些很简单的文字和图片的布局，其中文字环绕图片怎么办呢？聪明的css开发者就发明了一个float属性。这就是现在我们要

说的浮动。因此，浮动出现的意义就是让文字环绕图片。这是最原始的初衷。

文字环绕图片是怎么做到的呢？下面分析下。首先我们看看没有float的图文混排。

代码：

<!DOCTYPE HTML>

<html >

<head>

.item {border-top: 5px solid #dfdfdf;border-bottom: 5px solid #333;}

.item img {float:left;padding:2px; border:1px solid #999}

</style>

</head>

<body>

</div>

</body>

</html>

为什么呢？就是因为浮动最本质的特性，破坏了line box，将本身的高度降为0.由于其将高度降为0，浮动元素没有了内联盒子，

没有了内联盒子的高度，才能让其他内联盒子元素重新整合，环绕浮动元素来进行排列。