CSS float 和 clear

CSS浮动和清除浮动

 ps：纯个人理解，取自MDN，用于个人参考。

可用值：

float：left | right | none | inline-start | inline-end

• left：表明元素必须浮动在其所在的块容器左侧的关键字。
• right：表明元素必须浮动在其所在的块容器右侧的关键字。
• none：表明元素不进行浮动的关键字。
• inline-start：关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。
• inline-end：关键字，表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。

clear：left | right | botn | none | inline-start | inline-end

• left：元素被向下移动用于清除之前的左浮动。
• right：元素被向下移动用于清除之前的右浮动。
• both：元素被向下移动用于清除之前的左右浮动。
• none：元素不会向下移动清除之前的浮动。
• inline-start：该关键字表示该元素向下移动以清除其包含块的起始侧上的浮动。即在某个区域的左侧浮动或右侧浮动。
• inline-end：该关键字表示该元素向下移动以清除其包含块的末端的浮点，即在某个区域的右侧浮动或左侧浮动。

特性：

• 正常情况使用float后，将会改变该元素的display属性为block。
• 浮动元素脱离了正常的文档流，不会在文档流中占用位置。
• 浮动会向指定方向平移，一直平移直到碰到所处容器的边框，或碰到另一个浮动元素停下。

 

高度坍塌：

1. 子元素为浮动。
2. 父元素无高度且不浮动。

　　  满足以上条件时，高度坍塌出现了！去吧，皮卡丘！

        

       先看代码：

 

　　HTML

    <div>
        <button class="child"></button>
        <button class="child"></button>
        <button class="child"></button>
    </div>
    <div>
        <button class="child"></button>
        <button class="child"></button>
        <button class="child"></button>
    </div>
    <div>
        <button class="child"></button>
        <button class="child"></button>
        <button class="child"></button>
    </div>

　　CSS

    <style>
        .child {
            background: #fff;
            border: 1px solid #999;
            float: left;
            height: 34px;
            margin-right: -1px;
            margin-top: -1px;
            padding: 0;
            width: 34px;
        }
    </style>

　　我以为是这样的

　　

　　实际上是这样的

　　

　　what？

 　　

　　没错，高度崩塌了，为什么会这样？原因是div在没置高度的情况下，默认高度为子元素的高度。这里的子元素button早就已经被float给脱离文档流了，所以不管子元素button的高度设置为多高都和父元素div没有关系了（此时div因为没有东西撑开，所以高度为0）。那么根据div的特性是块级元素，块级元素会独占一行，3个div高度都是0px，那么换行的能看到的效果也是0，同时button的float值为left，浮动到父容器左边，注意了，当第二组div里面的button准备浮动到父容器左边的时候发现浮动不了，前面位置已经被上一组给占了，那么就在第一组的旁边艰难的找了一个空位置坐下(浮动元素和浮动元素之间依然保持流动性)第三组同理。

　　为了验证刚刚的话，我给每个div添加了border样式。

　　

        .div1 {
            border: solid green;
        }

        .div2 {
            border: solid yellow;
        }

        .div3 {
            border: solid cyan;
        }    

　　效果图：

　　　　　　

　　这时候因为添加了border线的原因，div产生了高度，3组浮动元素呈现阶梯形，而3个div依然坚强着。div：哪怕给我们一点点高度，我也要坚强！（div们依然遵守着规定，独占一行，坚守着自己岗位，向打工人致敬！）

　　

 　　怎么解决这个问题？

　　　　清除了div左右的浮动，原来依偎着div1的div2自然就换行下去了（div其实是顺带被带下去的，首先下去的肯定是浮动元素button）。

div {
            clear: both;
        }

　　PS：高度崩塌有很多解决方案，这里就不一一列举了。