margin塌陷 加css 别改结构,把父级变bfc
margin合并就是两个兄弟 垂直之间的margin是合并的,把最上面的兄弟多加像素即可,不要改结构
※ 浮动元素产生了浮动流,块级元素看不到它们(所以两个盒子,会处在同一行)产生了bfc的元素和文本类元素以及文本都能看到浮动元素
BFC是block format context
※ 正常规则里CSS认为把HTML每个元素都当一个盒子,而且进一步的认为每个盒子里都有一套一模一样的语法渲染规则,所以我们可以
通过一些手段让特殊的盒子里渲染规则发生改变
: position / float / display:inline-block; / overflow:hidden;
根据开发需求选择相应的需要
在学习过程中,怎样灵活的发挥其实对于中国学生来说并不容易,我们都习惯了固定的思维模式,
受从小教育的影响,导致大学生很多是作业或者其它everthing 是一样的标准,
难道培养人才的模式是一样的吗?为的是把我们变成一样的人吗?答案,is wrong
布局
table（表格）布局-->float（浮动）布局-->position（定位）布局-->flex（弹性）布局-->grid（网格）布局（还未正式推出）
float以成过去式了,但为了纪念,还是先聊聊这个问题,margin塌陷问题
:刚开始float并不是为了用来网页布局，而是用来解决图文信息中图片与文本冲突的问题,为的实现图片和文本环绕效果
如果浮动元素的父元素没有设定高度，当其子元素浮动后，父元素就因为内部没有子元素撑起从而高度变为0；就是父包不住子
怎么解决,用伪元素, content=""; clear:both; display:block; 伪元素天生是行级元素 能清除浮动的是块级元素 所以加 display:block;
position 和 float 打系统内部变成行级块元素
网页元素一般分为: 普通流，浮动流，定位流。
网页模型分为: 盒模型 层模型 浮动模型