摘要：在前端开发布局中，经常会被这个属性搞晕，尤其是新手的浮动，会使元素向左或向右移动，其周围的元素也会重新排列。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。浮动元素之前的元素将不会受到影响。导致图片将会浮动在段落的右边。
在前端开发布局中，经常会被float这个属性搞晕，尤其是新手
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：
img
{
float:right;
}
在下面的段落中，我们添加了一个 float:right 的图片。导致图片将会浮动在段落的右边。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是float的常见用法：对于文字包围图片
但是在div布局中 这里举一个例子：
头部信息
右侧内容
结果：
灰色的背景色并没有添加到第二行，因为第二行都是float的，和.ob-body不在一个层面上，第二行浮在.ob-body上层
现在我们把.clearfix的注释拿掉
头部信息
右侧内容
结果：
最后解析一下：为什么加了clearfix就ok了。
两种写法其实一个意思，就是在.ob-body的最后加入一个空的
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112257.html
摘要：那我们举个栗子当先声明一个元素向左浮动时，由于脱离文档流，这个元素的右边就会空出一片空间，空间的长宽与浮动元素长宽相同。总结总结下来，浮动与清除浮动的顺序关系如下设置元素浮动，元素脱离文档流，不计算高度。 本文主要探讨两个问题： 为什么CSS设置浮动会引起父元素塌陷 为什么设置clear:both能清除浮动，并撑开父元素。 起因 CSS的浮动，算是我在写网页时用的最多的属性之一。但...
摘要：包裹性所谓包裹性，其实是由包裹和自适应两部分组成。官方对属性的解释是元素盒子的边不能和前面的浮动元素相邻。清除高度塌陷的问题在上面的章节中，如果子元素设置浮动属性，则父元素就会出现高度塌陷的问题。 float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了，但是对于优秀的前端开发人员，需要有刨根问底的精神，...
摘要：时其宽度始终保持占满宽度的态度。清除浮动就是为浮动影响的范围划边界。那么可归结为的父容器包裹所有子元素。注意属性值不能为空白，否则无法清除浮动。 前言 定位系统中第一难理解就是Normal flow，而第二就非Float莫属了，而Float难理解的原因有俩，1. 一开头我们就用错了；2. 它跟Normal flow靠得太近了。本文尝试理清Float的特性和行为特征，若有纰漏望各位指正...
摘要：浮动为什么会有文本环绕效果产生这个疑问主要来自于以往的印象浮动的元素是脱离文档流的。也就是说，浮动元素的确脱离了文档流，因此文档流中的块框会无视浮动的元素，但是文本不会。 作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。 本文主要讨论以下几个问题：1.浮动的原始用途...
摘要：浮动为什么会有文本环绕效果产生这个疑问主要来自于以往的印象浮动的元素是脱离文档流的。也就是说，浮动元素的确脱离了文档流，因此文档流中的块框会无视浮动的元素，但是文本不会。 作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。 本文主要讨论以下几个问题：1.浮动的原始用途...
阅读 4962·2021-09-07 09:58
阅读 753·2019-08-30 15:55
阅读 2812·2019-08-30 15:55
阅读 888·2019-08-30 15:53
阅读 1514·2019-08-29 12:57
阅读 1714·2019-08-26 13:46
阅读 534·2019-08-26 11:00
阅读 3603·2019-08-23 15:42
