我对浮动的认识（一）

浮动布局是我之前用的比较多的一种布局，在用的过程中我也碰到了很多很诡异的问题，今天有空我花了些时间研究了下浮动布局，发现以前对浮动的理解

有些不对，特来记录下。欢迎大家拍砖。

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

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

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

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

代码：

<!DOCTYPE HTML>

<html >

<head>

.item {border: 2px solid #dfdfdf;padding:5px;width:400px}

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

</style>

</head>

<body>

日前，古装大戏《倾城雪》开机。

</div>

</body>

</html>

可以看出，图片和文字都在一行上显示，我看了下w3c中关于浮动的描叙，有一个关于line box的概念，其实就是将每一行当做一个盒子。

那么这个行盒是有高度的。它的高度就是这一行中的最大的inline box（内联盒）的高度。由于图片是和文字的baseline对齐的。

所以文字是在下面的。文字而不是在图片的中心位置。

那么如果添加了float：left属性呢。如下图所示：

可以看到文字沿着图片排列了。这是为什么呢？就是浮动的功效。由于浮动破坏了line box，即图片不再和文字组成一个行盒，所以他们不在一行上，

因此文字是从最上面开始排列的。由于文字的增多，会围绕着图片的。

浮动脱离了文档流，但由于是物理存在的，占有位置。

从上图可以看到图片超出了外面的包围的盒子，原因就是因为它脱离了文档流，由于它是物理存在的，它有宽度，占有左边的位置。顾文字是从右边

开始环绕着图片的。如果我增加了更多的文字。即使不在这个包裹元素里面。它仍然是从右边开始的，将右边的位置填满后然后才用图片下面的位置。

这好比流动的水一样，哪里缺口小，先往哪里钻，等钻不进去了，再钻大的缺口。。

浮动的元素是没有高度的，高度为0

实例为证如图：

代码：

<!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，浮动元素没有了内联盒子，

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

转载于:https://www.cnblogs.com/yupeng/archive/2011/04/10/2011925.html

我对浮动的认识（一）相关推荐

ireport如何给static text加边框_html amp;amp; css 解决li浮动边框为2的问题
html && css 解决li浮动边框为2的问题思路问题:首先,li 浮动后,添加边框,则中间 li 的边框会形成 1+1=2 的效果,1px的边框会变成2px.(例:分页模块 ...
css选择器及float(浮动)
--------------------------选择器( css有就近原则)------------------------------- 选择器名称在css表的 ...
asp.net 网页做一个浮动层_你们要的HTML、CSS布局技巧：如何规范搭建网页架构？
白天有知友邀请回答"如何规范布局网页结构"的问题,知乎上这类问题还挺多,我认为单就深入了解布局规范都足够说上一个月的,今天我就不论大范围,挑选小米网站首页的部分区块布局来讲解吧! ...
4蓝图遍历actor_【虚幻4笔记15】浮动平台
本系列为个人学习笔记,非专业教程,欢迎交流指正一.概述本节主要介绍浮动平台的实现(可作为不同关卡之间的连接) 二.C++实现 1.首先定义静态网格体变量将其初始化并设为根节点此处的静态网格体使 ...
18常用web开发浮动层、提示层代码下载
1.jQuery顶部固定层页面滚动淡出淡进菜单显示查看演示>> 2.jQuery鼠标滚动条到页面底部浮动层滑动弹出信息查看演示>> 3.网页向导Jquery插件wlGuid ...
任务二：1、选择器 2、连接集中状态的顺序 3、浮动的用发和原理 4、盒模型在IE和Google等不同浏览器的区别与联系...
1.选择器类型标签选择器,类选择器,ID选择器,组合选择器,伪类和伪元素,属性选择器,子选择器,同胞选择器, :not()选择器 1.同胞选择器相邻同胞标签: h2 + p{ color:red; ...
经验分享：CSS浮动(float,clear)通俗讲解
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
CSS中关于清除浮动的问题
1.采用:after的方法清除浮动优点:避免在html里插入多余的标签详情:http://www.positioniseverything.net/easyclearing.html 整理成一个通 ...
html在页面上div绝对定位,html – 中心浮动div在绝对定位div内
我有这套html和CSS.我想要的是必须让小的小工具块向左浮动但是在绝对定位的小工具包装器内部居中. 因此,小工具包装器绝对位于页面底部.它包含x个小工具,它们在包装器内部浮动. 所有这些小工具应该在 ...
浮动元素会引起的问题和你的解决办法
问题: (1)父元素的高度无法被撑开,影响与父元素同级的元素 (2)与浮动元素同级的非浮动元素会跟随其后 (3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构解决方法: ...

我对浮动的认识（一）

我对浮动的认识（一）相关推荐

最新文章

热门文章