关于嵌套块元素塌陷问题和块元素外边距失效问题的个人解决经验

最近在前端学习中我有尝试去仿制一个小米商城官网，遇到了两个问题，目前已解决，分享一下解决经验：

一、嵌套块元素塌陷问题

首先我们知道网页布局可以看作一个个盒子所组成，那么，我在嵌套盒子中便遇到了下图所示的情况：
这是问题所在块的左邻块：

这是问题所在块：

很容易我们发现问题：这个块没有和左邻块对齐，怀疑是外边距设置出了问题，于是去查看代码，发现块里面的两个子块设置了margin-top，但是影响到了父块，通过自己查找资料，有三个解决办法：
出现嵌套块元素塌陷问题，可以考虑使用绝对定位（position:absolute），但不推荐，更推荐下面三个方法：
1.可以为父元素定义上边框（border-top）。
2.可以为父元素定义上内边距（padding-top）。
3.可以为父元素添加overflow:hidden。（亲测有效！并且方便）

二、块元素外边距失效问题

同一个项目，还是在仿制小米商城网页，刚解决完嵌套块元素塌陷问题，就遇到了块元素外边距失效问题：
这里我为两个input标签都设置了margin-top:27px;，但是根本没有生效

通过查找资料以及教程，我发现问题所在：

左边块的这一系列选项是我写的ul表，其中ul我用了一个float:left修饰，然而这样做会导致相邻块的外边距设置失效，解决办法很简单：为相邻的块也添加float:left修饰，这里建议是与ul同一个父块下的子块都加上，避免其他子块出现同样问题。