html+css， margin塌陷及解决方法

margin 塌陷： 父子嵌套元素垂直方向的 margin，父子元素是结合在一起的，他们两个会取其中最 大的值 正常情况应该是父级相对于浏览器进行定位，子级应该相对于父级定位的 但是 margin 塌陷是在父级相对于浏览器进行定位时，子级没有相对于父级定位，就 像父级的棚子没有了一样 子级相对于父级，就像塌陷了一样

margin 塌陷解决方案：应该用 bfc，改变父级的渲染规则 block format context 块级格式化上下文 触发 bfc，特定的盒子会遵循另一套规则 margin 塌陷的解决方法只改了 css 弥补 margin 塌陷，可以使用 bfc，

如何触发一个盒子的 bfc？ 1）position:absolute; 2）display:inline-block; 3）float:left/right; //浮动 4）overflow:hidden; //溢出盒子的部分要隐藏展示

浮动元素： 1）浮动元素产生了浮动流 （浮动流产生的效果）所有产生了浮动流的元素，块级元素看不到他们。 产生了 bfc 的元素和文本类属性（带有 inline 属性就是文本类属性）的元素以及文本 都能看到浮动元素。

父级包不住，因为父级是块级元素，看不到浮动元素 想父级包住子集，方法一是加 height（只能解决一小部分）；方法二是清除浮动流 用 clear 清除周边的浮动流 clear：left；或 clear：right；或 clear：both； //一般直接写成 both，浮动元素用完，尽量都清除浮动流

父级包住浮动元素的解决方法： p 元素只要逻辑上在这里出生，并且清除浮动流，父级自然而然被他撑开 不管有多少个 div，大盒子都会被撑开 正常来说，在清除浮动的时候，是不能像上面那样通过增加来改变 html 结构， 从而清除浮动，这种方式在开发中是不能使用的 ，伪元素选择器 伪元素天生就存在于任意一个元素（标签 tag element）里面。天生是行级元素。 为什么叫伪元素？因为他的元素结构是存在的，但是他没写到 HTML 里面，他可以 被 css 选中，并正常操作，但是他没有 html 结构，所以叫伪元素。 他有两个特殊的伪元素 before 和 after 伪元素可以跟正常元素差不多可以一起来使用，但是他没有正常的元素结构 一个标签诞生的时候，他就有了伪元素，伪元素存在于逻辑的最前（after）和逻辑的 最后（before），只是一般看不见，除非我们通过 css 选中，并操作他 写成 span::before{}就是选择了 span 的 before 伪元素，里面有一个必须要有的值是 content:“”。而 content 也只能用在伪元素中 例 伪元素可以跟正常元素一样操作 而为了清除 float 的浮动流，就可以用到伪元素，也是最好的选择 clear 很特殊，想让他生效，必须是块级元素才可以，而::after 是行级元素