关于float的一些测试

dom：

    <ul class="nav">
        <li class="list-item">1</li>
        <li class="list-item">2</li>
        <li class="list-item">3</li>
        <li class="list-item">4</li>
        <li class="list-item">5</li>
        <li class="list-item">6</li>
    </ul>

css：

.nav{
    margin:20px;
    border:1px solid black;
    width:500px;
}
.nav .list-item{
    /* float: left; */
    background-color: yellow;
    height:80px;
    width:80px;
    list-style: none;
}

结果：

 

如果我们把css的注释去掉，结果变成：

在上图我们发现两个问题，

第一，竖直排列变成水平排练，而且排序的顺序是和我们阅读的顺序一样，这个left的作用，若是right就是先排右边，再排左边。

第二，我们的border变成一条直线了。

为什么会这样呢？

实际上，当把li元素设置为float元素时，li元素变成了浮动流，而不是分层。你可以自己测试一下，在html代码里面加一个块级元素，看其是否能和li元素共享一个平面空间（结果是不能的）。

要解释为什么border变成一条直线，要引入下面的两条原则：

第一：块级元素看不见产生浮动流的元素。

第二：产生bfc的元素和文本类属性元素以及文本元素都能看到浮动元素。

bfc元素的触发：

position:absolute;

float:left/right;

display:inline-block;

overflow:hidden;

于是就可以解释了，因为ul元素是块级元素，所以看不见里面的内容，所以就变成了没有内容的border——一条直线。

解决方法：

利用伪元素。清除掉float的影响。

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

一般而言，引用完float之后都需要清楚其印象，防止对后面元素造成不好的影响。

再说一点。position:absolute;和float:left/right；会把内部元素转换成inline-block。