CSS基础知识之float

wuyangchun 发布于2019-08-30 13:06 / 2925人阅读

摘要：前段时间写过一篇基础知识之，当时对的理解不太准确，被慕课网多名读者指出原文已修正，如有误导实在抱歉。浮动的基础知识浮动有个属性左浮动右浮动不浮动继承。浮动元素脱离了标准文档流，文字和行级元素会环绕该元素，块级元素则不受影响。

前段时间写过一篇CSS基础知识之position，当时对float的理解不太准确，被慕课网多名读者指出（原文已修正，如有误导实在抱歉）。现对float进行更深入的学习，在此把学习心得分享给大家。

浮动的基础知识

浮动有4个属性：left（左浮动）、right（右浮动）、none（不浮动）、inherit（继承）。

浮动元素的包含块是其最近的块级祖先元素。

浮动元素会左偏移（或右偏移），直到它的外边界接触到『包含块的内边界』或『另一个浮动元素的外边界』。

浮动元素脱离了标准文档流，文字和行级元素会环绕该元素，块级元素则不受影响。

浮动一个非替换元素，必须为该元素声明一个width，否则元素的宽度趋于0。

浮动元素的margin（外边距）不会与其他元素的margin合并。

浮动的深入研究

浮动元素的顶边不可以高于包含块中先前产生的块级元素或行级元素的顶。

浮动元素之间不可重叠，如果水平方向没有足够的空间放置浮动元素，它将向下移动，直到有足够的空间或没有更多的浮动元素为止。

浮动元素不能溢出包含块的左、右、上边界，仅可溢出下边界。（浮动元素溢出下边界时，部分浏览器会增加包含块的高度，使浮动元素能够包含在包含块中，出现大片空白，导致浏览器兼容性问题。）

浮动元素设置负外边距时，虽然浮动元素看起来溢出了包含块，但实际并没有违反上述规则。

特殊情况，浮动元素比包含块更宽时，浮动元素会在偏移的反方向溢出。

浮动的负作用

背景不能显示

边框不能撑开

margin padding 不能正确显示

清除浮动的方法

.clear-float1{ content: “”; display: block; clear: both; }
/* 方法1，当父包含块缩成一条时无效 */

.clear-float2{ overflow:hidden; width:100%; }
/* 方法2，overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容，从而实现了清除浮动。 */

.clear-float3{ overflow: auto; zoom: 1; }
/* 方法3，zoom是在处理兼容性问题，hidden和auto都能清除浮动，据说auto对seo更友好 */

扩展阅读

《CSS权威指南》——第10章浮动和定位

CSS基础知识之position，了解块级元素和行级元素，及定位基础知识

非替换元素和替换元素

KB011: 浮动( Floats )

KB008: 包含块( Containing block )

css清除浮动float的三种方法总结

欢迎来到石佳劼的博客，如有疑问，请在「原文」评论区留言，我会尽量为您解答。

云服务器私有云之基础篇黑客基础之DOS 零基础课程之c语言 css基础

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115310.html

CSS基础入门之float

摘要：在正常情况下，页面总是从左到右，从上到下布局，这种被称为正常的流。破坏文档流这是最本质的特性，因此设计的初衷就是破坏文档流。但是也有一种情况是，浮动元素前后并没有内联元素，因此也就不存在行框盒子，这时候就是浮动锚点在起作用。前几天有小伙伴说对float的学习云里雾里的，下面我就给大家说一下关于float的一些问题。在css中，是存在流的概念的。在正常情况下，页面总是从左到右，从上到...

xinhaip 2019-08-30 10:59 评论0 收藏0
CSS基础入门之float

摘要：在正常情况下，页面总是从左到右，从上到下布局，这种被称为正常的流。破坏文档流这是最本质的特性，因此设计的初衷就是破坏文档流。但是也有一种情况是，浮动元素前后并没有内联元素，因此也就不存在行框盒子，这时候就是浮动锚点在起作用。前几天有小伙伴说对float的学习云里雾里的，下面我就给大家说一下关于float的一些问题。在css中，是存在流的概念的。在正常情况下，页面总是从左到右，从上到...

lei___ 2019-08-05 17:05 评论0 收藏0
前端面试之CSS总结(上)

摘要：重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述...

琛ｈ。 2019-08-29 11:18 评论0 收藏0
CSS基础知识之position

摘要：最近在慕课网学习了网页布局基础和固定层效果，都是由声音甜美的婧享人生老师所录制，视频详细讲解了中的用法，在此把学习笔记分享给大家。最近在慕课网学习了网页布局基础和固定层效果，都是由声音甜美的婧享人生老师所录制，视频详细讲解了CSS中position的用法，在此把学习笔记分享给大家。 CSS定位机制标准文档流（Normal flow）浮动定位（Floats）绝对定位...

xiaowugui666 2019-08-30 12:56 评论0 收藏0
sass笔记-2|Sass基础语法之让样式表更具条理性和可读性

摘要：这个时候小明如果仅仅引入不想改，那么就是这个值，如果他想改，就可以在任何一处重新声明这个变量，那么就会变成小明的值。这一篇主要详述保持sass条理性和可读性的3个最基本方法——嵌套、导入和注释。零. 变量变量本身的作用是为了保持属性值的可维护性，把所有需要维护的属性值放在同一个地方，快速更改，处处生效，可谓售后无忧。 1.变量声明变量用$符号开头进行声明，任何可以用作CSS属性...

CloudDeveloper 2019-08-30 13:10 评论0 收藏0