优秀的你，才能遇到优秀的世界

为什么会产生高度坍塌：

父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

先上结论,清除浮动的方式：

1、给父元素添加overflow：hidden
2、在浮动元素下方添加空div，并给元素声明 clear：both
3、使用after伪类选择器清除浮动
4、父元素添加浮动
5、给父元素设定高度

一、父元素添加overflow：hidden

overflow：hidden是用于清除浮动的，本意就是把多余的部分隐藏，但是为什么隐藏之后父元素就不会出现高度坍塌呢
添加overflow：hidden原理其实是产生了BFC

1、BFC

什么是BFC：

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

怎么创建BFC：

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

BFC的作用：

1、避免margin重叠
2、自适应两栏布局
3、清除浮动

从BFC的创建和作用中可以总结出：

overflow：hidden这个属性创建了BFC BFC 又可以清除浮动所以overflow：hidden可以清除浮动
了解大概主体之后，我们开始分析其原理

原理

上面说到没有给父元素设置高度时。父元素的高度是被子元素撑开的，设置子元素浮动之后，在文档流中就没有了高度，所以父元素也没有高度，导致高度坍塌
父元素触动BFC之后，也脱离文档流，（相当于包含浮动流），所以子元素的高度依然可以撑起父元素。

优缺点

优点：代码少、简单
缺点：1、只适用于高版本游览器，IE6不支持。
2、不能和position定位配合使用，超出的尺寸会被隐藏

二、在底部加一个空元素

在底部加一个空元素并清除浮动
clear：both
这样的话底部的这个空元素是没有浮动的能托起父元素的高度
但是一般不建议这样使用添加一个空元素可能会造成语义等其他问题

优点：代码少，浏览器兼容好，只需要兼容 IE 浏览器，因为在IE兼容部分块元素会自带16px的高度，需要添加 height: 0;overflow: hidden;
缺点：需要添加多余的空标签并添加属性

三、使用伪类选择器清除浮动

这个方法用的比较多，
在总结这点的时候，一直没想明白，于是从什么是伪类选择器开始入手，
伪元素: 在不动结构代码的前提下,添加元素
伪类选择器：选中这个实际不存在的元素，然后清除浮动之后回归到文档流，就撑起了父元素的高度，解决了高度坍塌
注：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout

那么另外一个问题又来了

使用：before和：after 同时使用双伪元素清除浮动有什么区别？
从语言上来讲：before是在元素前加一个伪元素，：before是在元素后加一个伪元素，看上去好像没有什么不同，
目前查看的资料博客没有关于这个解释的，等我会了在回来补。

四、给父元素设置成为浮动元素

这点也比较好理解，因为高度坍塌就是子元素脱离文档流，父元素仍然在文档流造成的，现在给父元素设置浮动那么父元素也就自然包含了子元素，

缺点：会产生新的浮动问题所以一般不适用，只是一个思路

五、给父元素设置高度

既然子元素没有高度来撑起父元素，那么我们手动给父元素设置一个合适的高度就ok了
优点是代码量少，好理解
缺点是需要手动计算父元素的高度固定之后如果子元素发生改变还需单独修改父元素的高度

CSS中几种解决高度坍塌方式分析相关推荐

【面试题】CSS 中几种最常用的水平垂直居中的方法
目录 CSS 中几种最常用的水平垂直居中的方法一.使用 margin:auto 二.使用 position:absolute 三.使用弹性布局四.文本水平对齐和行高五.使用网格布局 CSS 中几 ...
【CSS】关于CSS的几种移动端布局方式
关于CSS的几种移动端布局方式一.移动端布局 01.meta视口标签设置 02.移动布局的分类有哪些? 03.为什么需要二倍图? (1)物理像素和物理像素比 (2)二倍图(根据需要确定多倍图) (3 ...
java获取项目中的路径_java中几种获取项目路径方式
转自http://caodaoxi.iteye.com/blog/1234805 在jsp和class文件中调用的相对路径不同. 在jsp里,根目录是WebRoot 在class文件中,根目录是Web ...
zynq学习03 zynq中三种实现GPIO的方式
http://m.blog.csdn.net/article/details?id=52123465 http://blog.chinaaet.com/songhuangong/p/43084 本文介 ...
python中导入模块的方式_Python中几种导入模块的方式总结
模块内部封装了很多实用的功能,有时在模块外部调用就需要将其导入.常见的方式有如下几种: 1 . import >>> import sys >>> sys.path ...
Spring RestTemplate中几种常见的请求方式GET请求 POST请求 PUT请求 DELETE请求
Spring RestTemplate中几种常见的请求方式原文地址: https://blog.csdn.net/u012702547/article/details/77917939 版权声明:本 ...
python导入模块有几种_Python中几种导入模块的方式总结
模块内部封装了很多实用的功能,有时在模块外部调用就需要将其导入.常见的方式有如下几种: 1 . import >>> import sys >>> sys.path ...
Python中三种表示NA的方式
Python中三种表示NA的方式 # -*- coding: utf-8 -*- import numpy as np import pandas as pd# data_frame = np.loa ...
CSS中几种中文字体的英文写法.
网页前端开发制作中经常我们需要用一些像微软雅黑,宋体等中文字体的情况,一般我们直接使用font-family:"微软雅黑"这样的写法,;以前还真没发现这有什么问题,直到今天折磨一上 ...
CSS中最全的换行处理方式
在Web页面上常常可以看到某个元素内部有一个很长的单词,元素的宽度不足以容纳它.一个常见的现象就是有一个很长的URL.这会发生什么呢?这取决于CSS,那么CSS如何控制布局,以及CSS如何让文本更合理 ...

CSS中几种解决高度坍塌方式分析