css 清除浮动的方法

css 清除浮动

浮动布局、定位布局、百分比布局为css中布局的常用的布局方式，而且兼容性会比较好。随着flex的流行，以后会是主流，但IE10以下不兼容flex布局。

float布局会脱离文档流，对页面的布局造成影响，比如造成父级的高度坍塌等问题。清除浮动后，被设置了 float 的元素会脱离文档流（可以清空格）。

清楚浮动的概念

在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫清除浮动。

清楚浮动方法

方法一：clear:both

在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。

实现原理：通过引入清除区域，这个相当于加了一块看不见的框把定义clear属性的元素向下挤。
优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

<style>
    li {
        height: 100px;
        width: 100px;
        float: left;
        background: red;
        margin-left: 20px;
    }
    ul{
        background: pink;
    }
</style>
<ul class="cc">
    <li></li>
    <li></li>
    <div style="clear: both;"></div>
</ul>

方法二：overflow: hidden;

子元素浮动了，会造成父元素的高度坍塌。只要给父元素添加overflow: hidden;属性，就可以解决浮动带来的影响

<ul class="cc">
    <li></li>
    <li></li>
</ul>
<style>
    li {
        height: 100px;
        width: 100px;
        float: left;
        background: yellow;
    }
    
    ul {
        overflow: hidden;
        padding: 0;
        margin: 0;
        background: pink;
    }
</style>

方法三：通过给父级元素添加伪类after，达到清除浮动的目的；

这种方式也是使用clear: both;的方式达到效果，只是变相的使用了伪类after，使得页面结构更简洁，也是常用的清理浮动的方式。

<style>
    li {
        height: 100px;
        width: 100px;
        float: left;
        background: red;
        margin-left: 20px;
    }

    .ulAfter:after {
        content: '';
        height: 0;
        line-height: 0;
        display: block;
        visibility: hidden;
        clear: both;
    }
    ul{
        background: pink;
    }
</style>
<ul class="ulAfter">
    <li></li>
    <li></li>
</ul>

方法四：使用双伪类；

推荐方法，此方法原理同上三种，但是代码更简洁

<style>
    li {
        height: 100px;
        width: 100px;
        float: left;
        background: red;
        margin-left: 20px;
    }
    
    .ulAfter:after,
    .ulAfter:before {
        content: "";
        display: block;
        clear: both;
    }
    
    ul {
        background: pink;
    }
</style>
<ul class="ulAfter">
    <li></li>
    <li></li>
</ul>