CSS相关之布局

margin重叠问题

垂直方向上的重叠

1.子子组件重叠问题

正正取大值、正负取和值、负负取小值

解决方案：

1.1.设置一个父元素，并设置父元素display: flex;

1.2.组件中间设置一个空元素，属性设置display: flex;

2.父子组件重叠问题

解决方案：

2.1.设置父组件的border

2.2.设置父组件display: flex或者inline-block（效果次之）

2.3.设置父组件overflow: auto;

2.4.添加父组件伪元素:before { content: ''; display: table; }

margin负值问题

margin-top: 自身向上移

margin-left: 自身向左移

margin-right: 右侧元素向左移

margin-bottom: 下面元素向上移

BFC

1.BFC只针对于子元素，对子元素的子元素不起作用

2.BFC满足条件：常见的我目前用的上的写几个

2.1.overflow: 除了visible 和clip

2.2.float 除了none

2.3.display: flex、inline-block等...

2.4.position: absolute、fixed

3.每个BFC相互隔离互不影响，是独立渲染区域

上面的margin重叠可以使用BFC解决，常见的还有清除float浮动（父元素处理浮动方法，成为一个隔离区；如果是子元素则可以使用clear: both;来清除浮动）