怎么样子盒子能撑起父盒子？从行内元素跟块元素来看:
一般情况下，行内元素只能包含数据和其他行内元素。 而块级元素可以包含行内元素和其他块级元素.
- 块级元素内部可以嵌套块级元素或行内元素。
- 建议行内元素里面只嵌套行内元素。
行内元素只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和其它元素和平共处于一行；
而块级元素可以包含行内元素和其它块级元素，且占据父元素的整个空间，可以设置 width 和 height 属性，浏览器通常会在块级元素前后另起一个新行。
行内元素尺寸由内含的内容决定，盒模型中 padding, border 与块级元素并无差异，都是标准的盒模型，但是 margin 却只有水平方向的值，垂直方向并没有起作用。
块级元素当没有明确指定 width 和 height 值时，块级元素尺寸由内容确定，当指定了 width 和 height 的值时，内容超出块级元素的尺寸就会溢出，这时块级元素要呈现什么行为要看其 overflow 的值
当使用div+css布局时，会出现很多的div嵌套——父div内嵌套一个或多个的子div，默认情况下，父div的高度是auto——它可以被子div任意的撑大。
父div也可以有固定的高度(或宽度)，比如height:500px，那么如果子div的高度超过了这个值，在默认情况下，子div会超出父div的束缚，这就是溢出
以下是子盒子撑不起父盒子的情况:
1.如果父元素已经规定了高度，不会高度塌陷，但可能会溢出（如果子元素总高度超过父元素的话）
解决方法:overflow属性,使多余部分不显示
2.如果父元素没有规定高度：常规流盒子在自动计算高度时，无视浮动盒子——高度坍塌
如果所有子元素都浮动，父元素没有高度，这时候给父元素设置边框的话，就会发现边框保不住子元素;
如果存在没有浮动的子元素，父元素高度取决于没有浮动的子元素，所以如果浮动子元素高度更大的话，还是会塌陷
浮动:
定位体系之一,常用于布局，可以很轻松的达到靠左靠右的效果,就是布局后要处理浮动带来的后续影响(父级高度塌陷)
常用语法:float:left左浮动/right右浮动/none不浮动;
任何元素都可以使用浮动，无论是块级元素div、ul等等，还是行内元素都可以浮动
任何被声明float的元素都会自动被设置成块元素，有了块级元素的各种特点，可以设置宽高，可以设置内外边距。
浮动后盒子位置
（1）左浮动的盒子向上向左排列；
（2）右浮动的盒子向上向右排列；
（3）(第二个)浮动盒子的顶边不得高于上一个盒子的顶边(上边在一条直线上)；
（4）若剩余空间无法放下浮动的盒子，则该盒子向下移动，直至具备足够的空间可以容纳盒子，然后再向左或向右移动。
常规盒子和浮动盒子同时存在
浮动盒子在摆放时会避开常规盒子
常规盒子会无视浮动盒子
常规盒子在计算高度时,无视浮动盒子(其余常规盒子高度低于浮动盒子,容易高度塌陷)
块级盒子常规1在前,浮动避让到第二行,常规2在浮动后面,但是无视浮动盒子,呈现上图,大盒子是上面常规盒子的高度之和
因为没有常规子盒子,常规盒子计算高度忽略浮动元素,高度塌陷
浮动带来的影响
1、背景无法显示
由于浮动的设置，如果对父级设置了CSS 背景 background、CSS背景颜色或CSS背景图片，则父级元素将不能被撑开，所以导致CSS背景不能显示。
2、边框无法撑开
如果父级设置了CSS边框 border 属性，由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin、padding 设置值无法正确显示
由于浮动的设置，导致父级子级之间设置了 margin 或 padding 属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
解决方法:清除浮动:1.使用:after伪元素方法,
可以直接在元素上添加:after{添加下列内容},也可以直接使用.clearfix这个class属性
.clearfix:after{
content: “”; /内容设置为空！！！/
display: block; /显示为块级元素！！！/
height: 0;
visibility: hidden;
clear: both; /清除浮动！！！/
}
通过3行代码 content: ""; display: block; clear: both; (必须写的内容)便可实现。
如果在IE6和IE7浏览器上使用，则需给clearfix添加一条属性zoom:1;以触发 haslayout 。
2.给父级设置高度3.clear属性,设置某侧不许浮动
clear:both/left/right
3.隔墙法:
所谓“隔墙法”是指在元素里面或外面添加一堵“墙”，即块元素，通过对其配置一定的CSS属性，以达到清除浮动的目的。
外墙法 ：在元素与元素之间新增一个块元素，并设置clear属性。
... ... 内墙法 ：在父元素里的所有子元素之后新增一个块元素（即父元素的last-child），并设置clear属性
Hello world!
Hello world!
Hello world!
新增的块margin-buttom不能使用,但是下个元素的buttom-top可以使用
这个方法所能体现的优点：1. 避免了多余标签的使用； 2. 可以兼容大部分浏览器。
4.BFC方法,overflow方法:
overflow:hidden;可以解决子元素溢出问题,还能解决高度塌陷问题.这里父盒子的高度小于子盒子中浮动盒子的高度,这是塌陷问题,不是溢出问题,多出部分不会被裁
如图,父级盒子是两个盒子的高度撑起来的,没有被裁掉的情况
overflow：hidden的意思是超出部分去掉，如果父元素height为auto，内部元素浮动，势必会将内部元素全部隐藏，故计算出内部浮动高度顺便清除浮动。
看到的一个理解：overflow: hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。深入理解overflow
实际原理:
BFC （Block Formatting Context）全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body)一个块级上下文，但是如果一个块级元素 设置了float:left，overflow:hidden或position:absolute样式，就会为这个块级元素生成一个独立的块圾上下文，就像在window全局作用域内，声明了一个function就会生成 一个独立的作用域一样，新开僻的BFC像是开僻了一个新的小宇宙，使这个块圾元素内部的排版完全独立隔绝。
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。
独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，也就是说包含块会把浮动元素的高度也计算在内，所以不用清除浮动来撑起高度。overflow清除原理
如何触发BFC
一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 下列方式会创建块格式化上下文：
- 根元素()
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- 行内块元素（元素的 display 为 inline-block）
- 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
- 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
- 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
- overflow值不为visible的块元素 -弹性元素（display为 flex 或 inline-flex元素的直接子元素）
- 网格元素（display为 grid 或 inline-grid 元素的直接子元素） 等等。
BFC是什么?怎么触发
BFC渲染规则
- BFC垂直方向边距重叠
- BFC的区域不会与浮动元素的box重叠
- BFC是一个独立的容器，外面的元素不会影响里面的元素
- 计算BFC高度的时候浮动元素也会参与计算
解决问题:解决高度塌陷,外边距重叠边距重叠:是指两个或多个盒子(相邻或嵌套)的相邻边界(其间没有任何非空内容,补白,边框)重合在一起而形成一个单一边界
解决这个问题的方法就是:破坏上面”相邻边界(其间没有任何非空内容,补白,边框)重合在一起”这个条件,
属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC解决重叠问题.
1.父子元素边界重叠:子元素添加 margin-top ，父元素下移(margin-top对父盒子作用了),子盒子跟父盒子间的垂直距离不变.
.father{ width: 500px; height: 500px; background-color: red; /* border: #000000 3px solid;1. 给父元素添加边框 */ /* padding-top: 100px; 2.给父元素添加内填充,用 padding 替换margin-top */ /* overflow: hidden; 3.设置 overflow:hidden; */ /* position: absolute; 4.父元素设置绝对定位 */ /* float: left; 5.父元素设置浮动 */ /* display: inline-block; 6.父元素修改元素类型 */ }
/* .father::before{ content: "a"; display: block; */ /* overflow: hidden; 7.使用伪对象选择器，给父元素前添加 内容，虽然为空，但是添加属性 overflow:hidden; 可以消除影响 */ }————————————————
对子元素设置
son{width: 300px;height: 300px;background-color: green;margin-top: 100px;/* position: absolute; 8.子元素设置绝对定位 */ /* float: left; 9.子元素设置浮动 */ /* border: #000000 3px solid;给子元素添加边框无效 */ }
浮动元素和绝对定位元素不参与边距合并。
父元素添加 overflow：hidden/auto ， display: inline-block；这两种方法是将父元素转化为BFC（页面布局中一块独立区域，其边距等属性不受其他元素影响。）
给父元素添加 border 和 padding 可以消除，是从 css 触发规范上解决问题
2.兄弟元素边界重叠(绝对值大的边界保留)上下盒子添加外边距重叠问题
解决方法:定位,浮动,display修改类型
边距重叠
补充:文字出现的链接有针对某一部分的解释,借鉴学习并整理