但如果我给上面第一个child再套一个容器,使用overflow:hidden;他就成了一个BFC,根据BFC的特性,BFC的子元素不会影响外面的元素,margin就不会合并,两个child的间距就是30px...flex
又遇到flex了,用flex做这种布局太简单了,直接父级设置display: flex, 左子级定宽,右子级设置flex:1就行了,如果要间距,可以直接用margin。...假如父级元素总宽度为500px,现在有A, B, C, D, E五个子元素,他们的flex-shrink分别为1, 1, 1, 2, 2,他们的flex-basis都是120px。...计算可知,五个子元素总宽度为120 * 5 = 600px,超出了父级100px,所以需要对子元素进行收缩。...在前面定宽+自适应的基础上给左右子元素都写一个极大的padding-bottom,这样两个子元素的高度都很大了,然后我们用一个同样的大的负的margin-bottom和父级的overflow:hidden