float布局
步骤:
- 子元素加上 float: left 和 width
- 在父元素上加 .clearfix
经验:
- 有经验者会留一些空间或者最后有一个不设 width
- 不需要响应式,因为手机上没有 IE,而这个布局是专门为 IE准备的
IE 6/7 存在双倍 margin bug, 两个解决办法(基本不用):
针对 IE 6/7 把 margin 减半
加一个 display: inline-block
1 | .clearfix:after { |
Tips:
- border 有时候会干扰尺寸,可以改成 outline
- 用 float 做平均布局时,可以在布局中增加一个x图层,其多余的右边距可以用 负的 margin 来改善布局
![Snipaste_2021-08-20_08-33-25](https://cdn.jsdelivr.net/gh/Drwna/image//images/Snipaste_2021-08-20_08-33-25.png)