圣杯布局 双飞翼布局

Question

1、双飞翼布局中left部分margin-left:-100%问题。

这个百分百大小看起来是main的宽度大小，为什么？

2、圣杯布局中

i> 添加元素inner container，container高度以及inner container有高度且一样，但是inner container高度不仅是自身的高度（包含了center的高度），inner container高度为什么这么算？

Answer 1

双越 2021-08-21 21:47:43

第一，margin-left 不是 main 的宽度，而是整个 body 的宽度。（main 宽度和 body 宽度一样）

第二，即便没有你加的 inner Container ，container 的高度也是 21px ，不是 0 。你可以下载讲师代码，再看一下。

• 提问者 weibo_慕斯卡7563518 #1

  一、” 即便没有你加的 inner Container ，container 的高度也是 21px ，不是 0 “
  
  这个问题好像跟清除浮动方法有关。
  
  如果在footer上直接clear:both，此时container高度会为0（我用的就是这种）；
  如果用伪元素after，container会有高度。
  
  造成这个差异的原因是啥？以及浮动元素不是应该不占位置的吗，那应该为0才正确啊？
  
  二、上面两种清除浮动方法，container会不一样，但是inner container高度始终都是42，不明白这个怎么来的

• 双越 回复 提问者 weibo_慕斯卡7563518 #2

  如果你不在 container 上清除浮动，那么 container 里面的元素有浮动，就会脱离文档流，container 高度就是 0 ，这符合预期。