常见的几种清除浮动（高度塌陷）的方法？

我们经常把解决高度塌陷问题叫做清除浮动。

高度塌陷问题------指父元素高度自适应（即父元素不设置高度或高度为auto，这时的父元素就靠子元素来撑开），子元素浮动float后，造成父元素高度为0的问题。

高度塌陷解决方法一：

给父元素设置高度。缺点就是父元素无法高度自适应，因为子元素的高度不确定，若把父元素的高度定死，则一旦浮动的子元素高度大于父元素的高度，会出现子元素高度溢出的情况。

高度塌陷解决方法二：

给父元素添加overflow：hidden；原理是触发了BFC（BFC就是块级格式化上下文）。优点是父元素高度可以因内容多少自适应。缺点就是父元素边框之外的部分会被隐藏（这个隐藏指的是具有定位position的子元素，因为定位不是高度不高度的问题），另一方面overflow：hidden；的含义是溢出隐藏的意思，有些时候我们就是要子元素超出父元素框的部分要显示出来，若给子元素添加position：relative；定位后再设置left、top、bottom、right为负值，则溢出父元素框的部分会被隐藏。如二级菜单的影响。

高度塌陷解决方法三：

在浮动的子元素末尾，添加一个空的div，并设置样式:

div{ clear: both; height: 0; overflow: hidden; }

加上height和overflow是为了兼容IE6，因为IE6中不能识别最小高度的容器。

原理：在父容器的最后，添加一个空div，由于这个div并没有浮动，所以它是可以撑开父容器的高度的，然后在对其进行清除浮动，这样可以通过这个空div来撑开父元素的高度。

优点：可以自适应，溢出部分不会被隐藏。

缺点：页面中需要多加载一个盒子，而该div盒子无任何内容，显得代码冗余。

高度塌陷解决方法四：

给父元素添加伪元素after。即在父元素的末尾添加内容。样式为

.box:after{ content: “” ; display: block; clear:both; overflow: hidden; visibility:hidden}

本身伪元素是内联元素，所以需要display转换为块元素。

visibility：hidden；是官方给出的，为了确保万无一失，即为了确保这个content添加的内容在空间上是存在的。

BFC简单讲解：

根据W3C的标准，页面中的元素都隐含一个属性叫Block Formatting Context简称BFC，该属性可以设置打开或者关闭，默认是关闭的。

当开启元素的BFC以后，元素将会具有如下的特性：

父元素的垂直外边距不会和子元素重叠
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素可以包含浮动的子元素

可以触发BFC的属性：

设置元素的浮动（但是用来解决父容器的塌陷问题时父容器也会出现脱标）
设置元素的绝对定位（同样如1，父容器会出现脱标）
设置元素为inline-block（设置为行内块那么margin：auto也就不会生效了）
将元素的overflow设置为一个非visible的值（解决高度塌陷影响最小的属性）

其实还有两个清除浮动的方法，但是及其不推荐使用。这两种方法如下：

display：table；不推荐使用，会产生未知问题
父元素跟着一起浮动，不推荐使用，需要解决新的浮动问题

常见的几种清除浮动（高度塌陷）的方法？相关推荐

CSS相关知识点：6种清除浮动和BFC
文章目录 CSS相关知识点:6种清除浮动和BFC 一.6种清除浮动 1.场景 2.原因 3.清除浮动 (1).给父级设置对应的高度 (2).给父级增加定位absolute (3).将父级也设计成浮动 ...
常用的几种清除浮动的方式
为什么要清除浮动?清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题.下面介绍四种清除浮动的方式: 1.额外标签法使用方法:在浮动元素末尾添加一个空标签. 例如: <div st ...
html清除div浮动,HTML_清除浮动的最优方法:CSS，在CSS森林群里讨论一个margin的 - phpStudy...
清除浮动的最优方法:CSS 在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动,嘿嘿,这个方法不单使用简单,而且FF.OP.IE7都支持,从此可以告别那又长兼容性 ...
常见的几种ADSL 路由器的端口映射方法
==大亚科技 DB-108路由器的端口映射方法大亚108全攻略(路由设置方法,端口映射方法) 一.路由设置方法: 1.先硬件连接,现在的交换机没有UPLINK口了确认正确与否:看设备的PC指示灯是否 ...
css 高度塌陷_css高度塌陷问题如何解决 css高度塌陷问题解决方法
本篇文章小编给大家分享一下css高度塌陷问题解决方法,文中通过示例代码详细的介绍了解决方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来一聚教程看看. 1. 高度塌陷在文档流中 ...
CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时候需要清除浮动? 我们对元素进行了浮动(float)时,我们的元素就会脱离文档流,像一只小船一样漂流在文档之上. 在 CSS ...
CSS学习（第四天）（浮动，常见网页布局，清除浮动，PS切图）
CSS浮动 1 浮动 1.1传统网页布局的三种方式 1.2 标准流(普通流/文档流) 1.3 为什么需要浮动? 1.3为什么需要浮动? 1.4什么是浮动? 1.5浮动特性(重难点) 1.6 浮动元素经 ...
CSS笔记 - fgm练习 2-10 - 提示框效果（清除子元素浮动高度塌陷的影响）
CSS清除浮动方法参考: https://blog.csdn.net/promiseCao/article/details/52771856 <style>*{margin: 0; pad ...
HTML学习笔记解决div浮动高度塌陷问题
第一种方式:开启BFC属性 <!doctype html> <html><head><title></title><mata char ...

常见的几种清除浮动（高度塌陷）的方法？

常见的几种清除浮动（高度塌陷）的方法？相关推荐

最新文章

热门文章