一般情况下，行内元素只能包含数据和其他行内元素。而块级元素可以包含行内元素和其他块级元素.
块级元素内部可以嵌套块级元素或行内元素。
建议行内元素里面只嵌套行内元素。
行内元素只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和其它元素和平共处于一行；
而块级元素可以包含行内元素和其它块级元素，且占据父元素的整个空间，可以设置width和height属性，浏览器通常会在块级元素前后另起一个新行。
行内元素尺寸由内含的内容决定，盒模型中padding,border与块级元素并无差异，都是标准的盒模型，但是margin却只有水平方向的值，垂直方向并没有起作用。
块级元素当没有明确指定width和height值时，块级元素尺寸由内容确定，当指定了width和height的值时，内容超出块级元素的尺寸就会溢出，这时块级元素要呈现什么行为要看其overflow的值
当使用div+css布局时，会出现很多的div嵌套——父div内嵌套一个或多个的子div，默认情况下，父div的高度是auto——它可以被子div任意的撑大。
父div也可以有固定的高度(或宽度)，比如height:px，那么如果子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不能正确显示。
2.给父级设置高度3.clear属性,设置某侧不许浮动clear:both/left/right
3.隔墙法:所谓“隔墙法”是指在元素里面或外面添加一堵“墙”，即块元素，通过对其配置一定的CSS属性，以达到清除浮动的目的。
外墙法：在元素与元素之间新增一个块元素，并设置clear属性。
新增的块margin-buttom不能使用,但是下个元素的buttom-top可以使用
这个方法所能体现的优点：1.避免了多余标签的使用；2.可以兼容大部分浏览器。
4.BFC方法,overflow方法:overflow:hidden;可以解决子元素溢出问题,还能解决高度塌陷问题.这里父盒子的高度小于子盒子中浮动盒子的高度,这是塌陷问题,不是溢出问题,多出部分不会被裁
如图,父级盒子是两个盒子的高度撑起来的,没有被裁掉的情况
overflow：hidden的意思是超出部分去掉，如果父元素height为auto，内部元素浮动，势必会将内部元素全部隐藏，故计算出内部浮动高度顺便清除浮动。
看到的一个理解：overflow:hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。深入理解overflow
实际原理:BFC（BlockFormattingContext）全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（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（分别是HTMLtable、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对父盒子作用了),子盒子跟父盒子间的垂直距离不变.
浮动元素和绝对定位元素不参与边距合并。
父元素添加overflow：hidden/auto，display:inline-block；这两种方法是将父元素转化为BFC（页面布局中一块独立区域，其边距等属性不受其他元素影响。）
给父元素添加border和padding可以消除，是从css触发规范上解决问题
2.兄弟元素边界重叠(绝对值大的边界保留)上下盒子添加外边距重叠问题解决方法:定位,浮动,display修改类型