步骤

1. 子元素上加float：left和width
2. 在父元素上加class="clearfix
3. 在样式里加上如下代码

.clearfix::after{
    content:"";
    display:block;
    clear:both;
    }

注： float使得元素脱离文档流，那么对于他的父元素的高度会变为0，这是因为块元素的高度是由它内部文档流元素的高度决定的。为了使得重新具有高度，所以前端工程师们发现了clearfix这个方法，至于原因暂时不得而知。

示例：一个小页面

[float布局实现小页面](Taobao (bluemiao10.github.io))

小经验

1. 在做之前reset，我用到了以下代码在我这个小页面里

*{margin:0;padding:0;box-sizing:border-box}

img{
    max-width:100%;
    max-height:100%
}

2. 在使用clearfix的时候，要时刻注意你的父元素和子元素的关系，因为很多时候，你的clearfix在第一层，而你的float-left却直接加到了第三层，我在做的过程中经常发现float-left/right没用，检查之后才发现是写错了。举个例子

 <aside class="logo">
                <a href="https://www.taobao.com/" target="_blank"><img src="images/image1.png" alt="logo"></a>
 </aside>

应该是这样

        .logo>a>img {
            float: left;
            height: 120px;
            margin-top: 20px;
        }

假如我这样

        .logo>img {
            float: left;
            height: 120px;
            margin-top: 20px;
        }

3. 在顶部的三栏布局中，右边布局的div必须放在中间布局div的前边，不然右边布局的border就会一直在外边整个border的右下角，但是调换顺序之后就好了。应该是两边固定，中间自适应。刚开始学，还是要多看文档。
4. 在之前选择的调试方式一直是利用加border的方法，但在有些情况下，比如平均布局时，boder-box计算宽度会将border计算进去，那么你在-margin的时候可能会出错，所以可以使用outline，它是往外的，所以不会带来影响。
5. 可以利用margin-left:auto;margin-right:auto;的方式实现相对于整个页面的自适应居中。