css清除浮动常用的四种方法实现

iliyaku 发布于2019-08-29 16:14 / 1656人阅读

摘要：用这种方法清除浮动，会为文档中增加不必要的结构，不推荐。可以包含浮动元素，所以能实现撑起高度的效果。以上是常用的几种方法，可以根据场景的不同选择适合的。

在页面布局中经常会用到浮动和清除浮动的操作，但之前是知其然而不知其所以然，看过多篇文章后，有了一些深入的了解，特整理下来！

浮动的目的：

最初设计浮动的目的是为了实现文字等内容可围绕图像显示，后来发现浮动方便布局，所以支持浮动任何元素，元素设置浮动后，会脱离原先文档的普通流中，让原先各自占据一行的块元素在一行显示，代码展示如下：

不设置浮动显示如下

如果只设置a块floagt:left:结果如下：

a块脱离了原先的文档普通流，不再占据原先的位置，所以b移移动到原先a的位置，因为a是浮动的，所以会遮挡住b，因为父元素没有设置高度，所以父元素的高度由子元素决定，现在为b的高度，a浮动后，超出了父元素的高度。

现在把b块也设置floagt:left，就实现了2个块状元素在一行显示：

现在看到虽然实现了2个块状元素在一行显示，但是父元素的高度现在为0，会影响到兄弟元素的排版，所以我们现在要解决这个问题，就用到了清除浮动的操作

清除浮动的方法

清除浮动后正常的显示如下图：

1、在父元素高度固定的情况下，可以直接设置父元素的高度height: 200px即可正常显示

2、增加块元素，用clear:both清除

clear：both是清除此元素左右2边的浮动，所以此元素会独占一行，在a、b的下一行，但clear仍然在文档流中，必须包含在父元素内，所以父元素为了包含clear，只能增加高度，最终的效果就达到了高度被撑起来。
用这种方法清除浮动，会为文档中增加不必要的结构，不推荐。

3、给父元素设置overflow清除浮动

overflow值可以是除visible之外的任何值，都能达到撑起高度的效果，但是scroll是导致滚动条始终存在，hidden会隐藏超出边框的部分，所以在选择的时候要格外注意
为什么overflow会实现这种效果呢？是因为它是一个块级格式化上下文 (Block Fromatting Context)，W3C对BFC的定义如下：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
BCF可以包含浮动元素，所以能实现撑起高度的效果。

4、使用after伪类

跟第2个方法原理类似，只是区别在于:clear在html中插入一个div.clear标签，而content 利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。
以上是常用的几种方法，可以根据场景的不同选择适合的。

GPU云服务器云服务器数据迁移的四种方法 activity的四种状态对数据仓库分析的四种方式 java中线程的四种状态

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

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

【CSS学习】--- float浮动属性

摘要：浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。不浮动的浮动的三浮动之于块浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。一、前言　　浮动元素以脱离标准流的方式来实现元素的向左或向右浮动，并且浮动元素还是在原来的行上进行浮动的。float浮动属性的四个参数：left：元素向左浮动；right：元素向右浮动；none：默认值，元素不浮动；i...

TigerChain 2019-04-23 11:48 评论0 收藏0
CSS的再深入3（更新中···）

摘要：而第一个依然存在，所以就会叠加。宋体行级加只要加了，这个元素就会脱离标准文档流行级元素加了，脱离了标准文档流，会变得块不像块，行不像行，能设置快高，能并排排列，则也不用给行级标签加了，没有意义。在前面，我们学习了标准文档流，但在实际制作的过程中，用标准文档流书写显然是不现实的，因此，我们来了解几种脱离标准文档流的方法： 1.float 浮动 float：left/right；（左浮/右浮） ...

RayKr 2019-04-23 13:19 评论0 收藏0
CSS三栏布局的四种方法

摘要：浮动代码如下注意元素次序代码如下左栏左浮动中间自适应右栏右浮动这种方式代码足够简洁与高效，也容易理解后记四种方法其实只有圣杯布局和双飞翼布局较难理解，但实际上理解了圣杯布局，双飞翼布局自然就理解了。前言总括：不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的，也许你不知道什么事三栏布局什么是两栏布局但实际已经在用，或许你知道三栏布局的一种或两种方法，但实际操作中也只会依赖那...

RobinQu 2019-08-30 13:14 评论0 收藏0
重拾css(9)——float

摘要：导致这一现象的最根本原因在于被设置了的元素会脱离文档流。脱离文档流可以理解为子元素与父元素间的结构被破坏，父子关系解除。 1.引言对于我们所有的web前端开发人员，float是或者曾经一度是你最熟悉的陌生人——你离不开它，却整天承受着它所带给你的各种痛苦，你以为它很简单就那么一点知识，但却驾驭不了它各种奇怪的现象。这就是我们又爱又恨的——float。所以，系统的学一学float是非常...

CollinPeng 2019-08-29 12:44 评论0 收藏0
浅析BFC布局的概念以及作用

摘要：的概念以及作用的概念以及作用的定义的定义直译为块级格式化上下文。是的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。BFC的概念以及作用 BFC的定义： (Block formatting context)直译为块级格式化上下文。它是一个独立的渲染区域，只有Block-level box参与，它规定了内...

荆兆峰 2019-04-23 13:29 评论0 收藏0