浮动机制 \ 清除浮动 \ margin坍塌 \ margin合并

1.浮动机制：

• inline元素设置height和width是无效的，但是如果设置了float为left 或right，就自动变成了block块级元素，高宽的设置就生效了
• 对普通元素（block,inline-block），它感受不到浮动元素的存在、可能会与浮动元素发生重合
• 对内联元素和文字，可以感知到浮动元素的存在，会形成环绕效果
• 对其他浮动元素： 浮动元素可以感知到浮动元素，高度不一样可能会出现卡住现象。
• 对父容器影响：父容器无法感知浮动元素存在，可能会造成高度坍塌，需要清除浮动。

2.清除浮动：

（1）语法： clear : none | left | right | both；
（2）值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象

• 对于CSS的清除浮动：这个规则 只能影响使用清除的元素本身，不能影响其他元素。 如：如果想让自己没有左浮动，可以直接设置自己为clear：left；而不可让它前面的元素设置 clear:right;这样设置没有用

3.margin塌陷 ：(父元素子元素）

（1）原因：如果两个margin元素连在一起，中间没有padding或border，那么margin在垂直方向会叠加现象。表现为较大的margin会覆盖掉较小的margin，这就是margin塌陷现象。
（2）解决方法：

• 给父元素添加透明边框
• 给父元素添加padding-top:npx;
• 给父元素添加overflow:hidden;
• 给父元素添加position: absolute;
• 给父元素添加position: fixed;
• 给父元素添加display: inline-block;

4.margin合并 ：（兄弟元素）

（1）定义：块级元素的上外边距或下外边距有时（直接接触/相邻时）会合并为一个外边距，这种合并行为叫做margin合并。
（2）合并原则：正正取最大，负负取最负，正负就相加
（3）解决方法：

• 可以用padding 代替margin
• 可以增加border来隔断margin