关于清除浮动的几种方法

　　给元素设置浮动是开发中比较常见的，但是设置浮动后，会导致元素脱离正常的文档流，影响页面的布局，如果不对元素进行清除浮动的处理，会对页面布局造成

很多影响。

　　在什么情况下需要清除浮动呢？

　　　　当父元素没有设置宽度或者高度的时，又需要子元素撑开父元素的时候使用清除浮动。

　　不清除浮动会有什么影响？

　　　　1.父元素在不设置宽高的情况下，子元素设置了浮动，会造成父元素的宽高无法被撑开

　　　　2.后续页面布局造成影响

　　　　3.父级设置的一些背景不能正确显示，因为父级没有宽高

　　基础布局html+css

    <div class="Box">
        <div class="boxItem1"></div>
        <div class="boxItem2"></div>
     </div>
    <div class="Box2"></div>

    <style>
        .boxItem1{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .boxItem2{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .Box2{
            width: 100px;
            height: 100px;
            background: black;
            float: left;
        }
    </style>

　　提供的几种清除浮动方法：

　　　　方法1：在设置浮动的最后一个元素后面加上一个空标签，设置css为clear: both;即可

　　　　方法2：给浮动元素的父级设置css样式overflow为auto或者hidden

　　　　方法3：通过设置浮动元素父级的伪元素after来清除样式　　　　　

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

 

　　

转载于:https://www.cnblogs.com/qiuchuanji/p/11428026.html