关于浮动与清除浮动，你应该知道的

时间 2019-11-07

标签关于浮动清除应该知道繁體版

原文原文链接

我在作页面布局的时候，多多少少总会受到来自浮动的困扰，所以专门经过实践来总结一下浮动与清除浮动。html

首先总结几个基础的概念：布局

浮动：设置浮动的元素会脱离文档流，不会影响块元素的布局，可是会影响内联元素的排列[一般是文本]；spa

文档流：在文档流中，块元素会单个元素独占一行3d

接下来咱们经过实际演示来看看关于浮动的那些事儿。code

下面是5个div块元素在文档流中一次排列htm

咱们知道浮动元素有几个规律blog

若是浮动元素的上一个元素也是浮动，那么该元素会与上一个元素排列在同一行，若是行宽不够，后面的元素会被挤到下一行
若是浮动元素的上一个元素不是浮动，那么该元素仍然处于上一个元素的下方，根据浮动设定在左或者在右，而其自己也脱离文档流。后边的元素会自动往上移动到上一个文档流块元素下方为止

根据上面的规则，咱们作一些改动来验证一下ip

给2添加左浮动，给3添加右浮动rem

首先1没有浮动，因此2在1的下一行，而3的上一个元素2是有浮动的，因此3和2在同一行，2和3由于有了浮动，因此脱离了文档流，他们后面的元素4就自动往上移动，处于1的下方文档

给元素2添加左浮动

由于它的上一个元素1没有浮动，因此排列在1的下方，不和1同一行。而元素2同时脱离了普通流，所以后边的元素会顶替上来

所以，浮动元素的位置是根据他的上一个元素来肯定的[以及浮动位置来肯定]

清除浮动

可能浮动会比较好理解一点，而很多人会对清除浮动有一些误解。

清除浮动并非说让浮动元素回到文档流
清除浮动只会改变改元素自身的位置，而且只针对排在该元素前面的元素。目的是让本身的左边或者右边没有浮动元素

例子1

给2添加左浮动，给3添加右浮动，以后给3添加清除左边的浮动。

由于2是3的上一个元素，因此给3清除浮动，只有2才能影响他的位置，而2在3的左边，所以只有给3添加清除左浮动才有效果，清除左边浮动的意思，就是让2不在3的左边，因此3会改变本身的位置，移动到2的下一行，可是右浮动的效果任然在，因此在下一行的右侧

再给5添加删除右浮动效果，由于5的右边有一个浮动元素是3，而3是5前面的元素，所以5会改变位置，让本身左右没有浮动元素

例子2

给1，2，3，4添加左浮动

而后给3添加清除左浮动的效果。若是直接给3清除右浮动，将没有任何变化，由于3右边的浮动效果是4，而4处于3的后边，不会影响3的位置

关于高度坍塌

当没有指定高度的父元素中的子元素所有都浮动时，父元素中内部高度由于是普通流中的块元素撑起来的，因此这个时候父元素的高度会变成0.或者会有部分浮动元素的位置会超出父元素的高度以外。这种现象，叫作高度坍塌。

以下图，给元素设置左浮动。设置了边框的父元素由于没有高度因此上下边框重合，看上去就像一条线

解决方法：使用:after伪元素

<!-- 浮动 清除浮动 高度坍塌 -->
<!DOCTYPE html>    
<html lang="en">  
<head>  
    <meta charset="UTF-8">
    <title>高度坍塌</title>  
    <style>  
        .div1 {  
            border: 1px solid #ccc;        
        }
        .div1:after {           
             content: '.';           
             display: block;            
             height: 0;            
             visibility: hidden;            
             clear: both;        
         }
        .div2 {            
            width: 100px;            
            height: 100px;            
            margin: 5px;            
            background-color: orange;            
            float: left;        
        }
    </style>
    <!--[if IE]>  
    <style> 
        .div1 { 
            zoom:1;/*触发hasLayout*/  
            display:block;  
        }  
    </style>  
    <![end]-->
</head>  
<body>  
    <div class="div1">  
        <div class="div2"></div>  
    </div>  
</body>  
</html>

after的原理是在div1的子元素最末尾添加一个元素，若是该元素可以位于div2的后面，而且没有浮动，那么父元素div1的高度就会从新获取。所以使用了上方的解决方案

所以，闭合浮动以后，一切恢复正常

这就是经过在子元素末尾添加伪元素来解决高度坍塌问题的解决方案。